Vue组件注册的二种方式,以及组件之间的通信方式 - 第20期培训-大前端

Home > List of blog posts > Vue组件注册的二种方式,以及组件之间的通信方式

Blogger Information

Blog 37

fans 0

comment 0

visits 14218

Special Recommendation

More>

Related recommendations

全局组件和局部组件注册

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <title>Vue组件</title>
  </head>
  <body>
    <!-- 全局组件 -->
    <div id="app">
      <my-button></my-button>
    </div>
    <!-- 在外部给,template -->
    <!-- <template id="content">
      <button @click="++count">点攒{{count}}</button>
    </template> -->
    <script>
      const app = Vue.createApp({
        // 局部组件
        components: {
          //局部组件命名小驼峰，不过在html中要转为蛇形
          myButton: {
            template: `<button  v-on:click="++count">点攒{{count}}</button>`,
            data() {
              return {
                count: 0,
              };
            },
          },
        },
      });
      //   //全局组件
      //   app.component("my-button", {
      //     data() {
      //       return {
      //         count: 0,
      //       };
      //     },
      //     //在内部给
      //     // template: `<button  v-on:click="++count">点攒{{count}}</button>`,
      //     //在外部给
      //     template: "#content",
      //   });
      //   //挂载Vue
      app.mount("#app");
    </script>
  </body>
</html>

组件父参数传递到子组件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件向子组件传参</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <!-- //父组件 -->
      <!-- 使用自定义属性将父组件参数传入子组件中 -->
      <my-button v-bind:username="name" v-bind:pwd="pwd"></my-button>
    </div>
    <template id="button">
      <!-- //子组件 -->
      <label for="username">用户名：</label>
      <input type="text" name="username" v-model="username" />
      <label for="password">密码:</label>
      <input type="text" name="password" v-model="pwd" />
    </template>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            name: "admin",
            pwd: "123456",
          };
        },
        components: {
          myButton: {
            template: "#button",
            // props: 用数组接收父组件传入的自定义属性做为载体的参数
            props: ["username", "pwd"],
          },
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

子组件向父组件传递参数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>子组件向父组件传参:监听子组件事件</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <my-button @click-info="fun"></my-button>
    </div>
    <template id="content">
      <input type="text" name="uname" v-model="name" placeholder="用户名" />
      <input type="text" name="pwd" v-model="pwd" placeholder="密码" />
      <!-- 发布订阅 -->
      <!-- $emit(自定义事件名称, 向父组件传递的参数(可选)) -->
      <!-- $emit('reviewCount', this.count) -->
      <button @click="$emit('click-info',[name,pwd])">提交</button>
    </template>
    <script>
      const app = Vue.createApp({
        methods: {
          fun(info) {
            console.log(info);
          },
        },
      });
      //全局组件
      app.component("my-button", {
        template: "#content",
        data() {
          return {
            name: "admin",
            pwd: "12345",
            info: {},
          };
        },
      });
      app.mount("#app");
      // 1. 父->子: props: [....]
      // 2. 子->父:
      //    2.1 子发布事件: $emit(自定义事件,参数?)
      //    2.2 父订阅事件: @自定义事件(...args)
    </script>
  </body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

Markdown语法和emmet语法

2022-07-02 10:20:44

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

全局组件和局部组件注册

组件父参数传递到子组件

子组件向父组件传递参数

全局组件和局部组件注册

组件父参数传递到子组件

子组件 向父组件传递参数

子组件向父组件传递参数