[前端开发]Vue父子组件的通信及访问

父传子 props

子传父 自定义事件emit

props传数组

props:['cmovies','cmessage']

props传对象

props:{
    //1.类型限制
    cmovies:Array,
    cmessage:String
    //2.提供一些默认值
    cmessage:{
        type:String,
        default:'你好啊', //默认值
        required: true //设置为必传值(cmessage)
    }
    cmovies:{
        type:Array,
        default(){
            return []
        }
    }//当类型为数组时，default 返回的也是数组[]
    cinfo:{
        type:Object,
        default(){
            return {}
        }
    }//当类型为对象时，返回的也是对象{}
}

vue实例

<div id="app">
    <cpn :cmovies="movies" :cmessage="message"></cpn>
  </div>

用v-bind来绑定子组件和父组件中的数据，调用的时候用子组件的

模板cpn

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

cpn组件

const cpn = {
    template: '#cpn',
    props:['cmovies','cmessage'],
    data(){
      return{}
    }
  }

为子组件设置两个props（属性），在使用时可以用v-bind绑定数据

new vue

   var vm = new Vue({
      el: '#app',
      data: {
        message:'你好啊',
        movies:['加勒比海盗','海贼王','海王','海尔兄弟']
      },
      methods: {},
      components:{
        cpn
      }
    });

父子传值 props驼峰标识

为什么不用cInfo而用cinfo呢

v-bind不支持驼峰

childMyMessage要写成child-my-message

子传父

当子传父时，就需要自定义事件了

v-on来监听dom事件，也可用于组件之间的自定义事件

流程

在子组件中，通过 $emit() 来触发事件，在父组件中，用v-on来监听事件

//父组件
<div id="app">//用v-on来监听事件
    <cpn @item-click="cpnClick"></cpn>
  </div>

//子组件
<template id="cpn">
    <div>
      <button v-for="item in categories" @click="btnClick(item)">
        {{item.name}}</button>
    </div>
  </template>

//cpn子组件

const cpn = {
      template:'#cpn',
      data(){
        return{
          categories: [
            { id: 'aaa', name: '热门推荐' },
            { id: 'bbb', name: '手机数码' },
            { id: 'ccc', name: '家用家电' },
            { id: 'ddd', name: '电脑办公' },
          ]
        }
      },
      methods:{
        btnClick(item){
          //子组件发射了一个自定义事件
          this.$emit('item-click',item)
        }
      },
    }

//new vue
 var vm = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      },
      methods: {
        cpnClick(item){
          console.log('cpnClick',item)
        }
      },
      components: {
        cpn
      }
    });

父访问子$children $refs

• $children

cpn: {
          template: '#cpn',
          data(){
            return{
              name:'黄开然'
            }
          },
          methods: {
            showMessage() {
              console.log('showMessage')
            }
          }
        }
      }

如何在父组件中调用showMessage()？

<div id="app">
    <cpn></cpn>
    <button @click="btnClick">button</button>
</div>

var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        btnClick() {
          console.log(this.$children)
          for(let c of this.$children){
            console.log(c.name)
            c.showMessage()
          }
        }
      }

• refs

默认是个空的对象

一个类似id的标识

使用：

<cpn ref="aaa"></cpn>
methods: {
        btnClick() {
          console.log(this.$refs.aaa.name)
        }
      },

子访问父 $parent $root

不常用