父子组件通信

父子组件通信

1. 父组件 —> 子组件 通过props（properties缩写）通信 两种方式：数组和对象（常用对象方式）

<div id="test">
  <cnt :cmovies="movies"></cnt>
</div>

<template id="comC">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
<!--  子组件-->
  const cnt = {
    template:'#comC',
    //props其实就是为子组件定义属性，为了在使用时能接受父组件的传值，然后该属性就可以在自己的模板中使用
    // props: ['cmovies','chobbies']   //数组写法
    props: {
      //对象写法  1.限制类型
      // cmovies: Array
    //  对象写法 2.默认值等
      cmovies: {
        type: Array,
        // default: 'aaa' 默认值如果是数组或是对象类型，则default必须定义函数返回
        default (){
          return []
        },
        requires: true //规定必须传值
      }
    }
  }

<!--  父组件-->
  const app = new Vue({
    el: '#test',
    data: {
      movies: ['烈火英雄', '我和我的家乡', '我和我的祖国'],
    },
    //注册子组件
    components: {
      //原来写法：cnt: cnt
      cnt
    //  ES6新增的对象字面量的增强写法
    }
  })
</script>

2. 子组件 —> 父组件 通过$emit event事件传递

<div id="test">
<!--  这里的cpnclick不需要括号接受参数，Vue会直接将参数传递-->
  <cnt @itemclick="cpnclick"></cnt>
</div>

<template id="comC">
  <div>
    <button v-for="item in categories" @click="bntclick(item)">{{item.name}}</button>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const cnt = {
    template: '#comC',
    data(){
      return {
        categories:[
        {id: 101, name: '家用电器'},
        {id: 102, name: '生活趣味'},
        {id: 103, name: '美妙装扮'},
        {id: 104, name: '游戏乐园'}
        ]
      }
    },
    methods: {
     bntclick(item) {
       //发射一个itemclick事件，参数放在第二个位置
       this.$emit('itemclick',item);
     }
    }
  }

  const app = new Vue({
    el: '#test',
    data: {
    },
    components: {
      cnt
    },
    methods: {
      cpnclick(item){
        console.log(item.id)
      }
    }
  })
</script>

3. 父组件访问子组件 $children 和 $refs （常用）

<div id="test">
  <cnt ref="aaa"></cnt>
  <button @click="bntClick">按钮</button>
</div>
<template id="cnp">
  <h2>我是cnp组件</h2>
</template>
<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#test',
    data: {

    },
    methods:{
      bntClick(){
        console.log(this.$refs.aaa.name) //访问子组件data中的name
        this.$refs.aaa.showMessage();//访问子组件methods中的showMessage函数的信息
      }
    },
    components: {
      cnt: {
        template: '#cnp',
        data(){
          return {
            name: 'Alice'
          }
        },
        methods:{
          showMessage(){
            console.log('这是子组件的showMessage信息')
          }
        }
      }
    }
  })
</script>

4. 子组件访问父组件 $parent 和 $root 都不常用，需要了解去百度一下