Communication and access [distal developed] Vue Sons assembly

Father to son props

Child transmission parent emit custom events

pass an array of props

props:['cmovies','cmessage']

props pass objects

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 examples

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

V-bind when used to bind the parent data and subassembly components, sub-assemblies called

Template cpn

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

cpn components

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

The props arranged two (attributes) of the subassembly, in use data can be bound v-bind

new view

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

Father and son by value props hump logo

Why not cInforather use cinfoit

v-bind does not support the hump

childMyMessageTo be writtenchild-my-message

Parent child transmission

When the father of the child pass, you need a custom event

dom v-on to listen for events, it can also be used to customize events between components

Process

Subassembly by $emit() To trigger events in the parent assembly, withv-onTo listen for events

//父组件
<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
      }
    });

Parent Access sub $ children $ refs

• $children

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

How to call showMessage in the parent assembly ()?

<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

The default is a null object

A similar id identification
use:

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

Child access to parent $ parent $ root

uncommonly used