Vue中父子组件之间的通信

父子组件的通信

一、通过props向子组件传递数据

props有两种写法：

1、字符串形式,数组中的字符创就是传递时的名称

 //cmovies作为变量，接受从父组件中传过来的数据，通过v-bind赋值显示出来
 <div id="app">
      <cpn v-bind:cmovies="movies"></cpn>
    </div>
 //在子组件中也可以使用该变量
    <template id="cpn">
      <div>
         {{cmovies}}
      </div>
    </template>
    <script>
      //父传子
      const cpn = {
        template: "#cpn",
        data(){},
        props: ["cmovies"],
      };
​
      const app = new Vue({
        el: "#app",
        data: {
          message: "nihao",
          movies: ["海王", "海贼王", "海尔兄弟"],
        },
        components: {
          cpn,
        },
      });
    </script>

2、对象形式

 props:{
          //类型的限制
          // cmovies:Array,
​
          //2.提供一些默认值
          cmovies:{
            type:String,
            default:'aaaaaa',  //类型是对象或者数组时，默认值必须为函数default(){[]}
            required:true //如果需要使用该变量，则必须传值
​
          }
        }

二、通过事件向父组件发送消息

自定义事件传递消息

 <!-- 父组件模板 -->
    <div id="app">
      //2、父组件接收到发射的消息，交由cpnClick处理
      <cpn @itemclick="cpnClick"></cpn>
    </div>
​
    <!-- 子组件模板 -->
    <template id="cpn">
      <div>
        <button v-for="item in categories" @click="btnClick(item)">
          {{item.name}}
        </button>
      </div>
    </template>
​
    <script>
      // 子组件
      const cpn = {
        template: "#cpn",
        data() {
          return {
            categories: [
              { id: "aaa", name: "remen" },
              { id: "bbb", name: "shuma" },
              { id: "ccc", name: "jiadian" },
              { id: "ddd", name: "bangong" },
            ],
          };
        },
        methods: {
          btnClick(item) {
           //1、子组件向父组件发射消息
            this.$emit("itemclick", item);
          },
        },
      };
​
      const app = new Vue({
        el: "#app",
        data: {
          message: "nihao",
        },
        components: {
          cpn,
        },
        methods: {
        //3、父组件中的方法cpnClick对消息进行处理
          cpnClick(item) {
            console.log("cpnClick", item);
          },
        },
      });
    </script>

三、父子组件的访问方式

1、父组件访问子组件：使用$children或$refs

$children适用于访问所有子组件，但是一旦想要拿到某个特定的子组件就不适用了，通过ref给想要拿到的子组件添加名字，即可通过$refs找到。

<div id="app">
      <cpn></cpn>
      <cpn ref="aaa"></cpn> //使用refs访问
      <button @click="btnClick">按钮</button>
    </div>
​
    <template id="cpn">
      <div>我是子组件</div>
    </template>
​
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "nihao",
        },
        methods: {
          btnClick() {
            //使用$children访问
            // console.log(this.$children);
            // this.$children[0].showMeaasge();
​
            //$refs 为对象类型，默认是空的，在标签中加上ref属性
            console.log(this.$refs.aaa);
          },
        },
        components: {
          cpn: {
            template: "#cpn",
            methods: {
              showMeaasge() {
                console.log("showMessage");
              },
            },
          },
        },
      });
    </script>

2、子组件访问父组件：使用$parent和$root

<div id="app">
      <cpn></cpn>
    </div>
​
    <template id="cpn">
      <div>
        <ccpn>我是cpn组件</ccpn>
      </div>
    </template>
​
    <template id="ccpn">
      <div>
        我是子组件
        <button @click="btnClick">按钮</button>
      </div>
    </template>
​
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "nihao",
        },
        components: {
          cpn: {
            template: "#cpn",
            data() {
              return {
                name: "我是cpn组件的name",
              };
            },
            components: {
              ccpn: {
                template: "#ccpn",
                methods: {
                  btnClick() {
                    //1.访问父组件
                    // console.log(this.$parent);
                    // console.log(this.$parent.name);
​
                    //2.访问根组件$root
                    console.log(this.$root);
                    console.log(this.$root.message);
                  },
                },
              },
            },
          },
        },
      });
    </script>

\