通信アクセスVueのサンズアセンブリ[遠位開発]

息子の小道具の父

子伝送親EMITのカスタムイベント

小道具の配列を渡します

props:['cmovies','cmessage']

小道具は、オブジェクトを渡します

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バインド

テンプレート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{}
    }
  }

小道具は、使用データに、サブアセンブリの2つ（属性）に配置されたV結合を結合させることができます

新しいビュー

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

父と値の小道具こぶロゴによって息子

なぜcInfo、むしろ使用しcinfo、それを

V-バインドこぶをサポートしていません。

childMyMessage書き込まれますchild-my-message

親の子伝送

子供の父親が通過するときには、カスタムイベントを必要とします

DOM V-上のイベントをリッスンするために、コンポーネント間のイベントをカスタマイズするためにも使用することができます

プロセス

サブアセンブリによって EMITを$（）で、アセンブリの親でイベントをトリガするにはV-上イベントをリッスンするには

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

親アクセスサブ$子供$レフリー

$子どもたち

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()
          }
        }
      }

レフリー

デフォルトはNULLオブジェクトであります

同様のID識別
使用：

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

親$親$ルートに子のアクセス

ではない、一般的に