Vue组件注册的二种方式,以及组件之间的通信方式

全局组件和局部组件注册

<!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>

全局组件和局部组件注册

组件父参数传递到子组件

子组件 向父组件传递参数

相关文章

子组件向父组件传递参数