Vue 父子组件之间通信方式

组件

组件是可复用的vue实例,从形式上看就是一个自定义html标签
模板里面第一级只能有一个标签，不能并行；

• 全局组件：全局可见,声明在vue实例外部

//声明
Vue.component("child-component", childComponent{});
const vm = new Vue({})

• 局部组件：声明在vue实例内部

const vm = new Vue({
        el: ".app",
        components: {
          MyClick: {
            template: `<h1>我是局部组件</h1>`,
          },
        },
      });

父子组件之间通信方式

• 父组件是通过自定义属性的方式将参数传到子组件中的

<div class="app">
//用子组件自定义属性my-age获取父组件age的值
      <my-click :my-age="age"></my-click>
    </div>
    <script>
      const vm = new Vue({
        el: ".app",
        data() {
          return {
            age: 28,
          };
        },
//声明子组件
        components: {
          myClick: {
            props: ["myAge"],
            template: `<p>我的年龄是{{myAge}}</p>`,
          },
        },
      });
    </script>

• 子组件中更新父组件的数据是通过事件完成

<div class="app">
//用子组件@click-count绑定的事件调用父组件handle方法
      <my-click :my-age="age" :my-count="count" @click-count="handle"></my-click>
    </div>
    <script>
      const vm = new Vue({
        el: ".app",
        data() {
          return {
            age: 28,
            count: 0,
          };
        },
        components: {
          myClick: {
            props: ["myAge", "myCount"],
            template: `
            <div>
            <p>我的年龄是{{myAge}}</p>
            <button @click="$emit('click-count',1)">click:+{{myCount}}</button>
            </div>
            `,
          },
        },
        methods: {
          handle(value) {
            this.count += value;
            console.log(this.count);
          },
        },
      });
    </script>