子父傳參

vue1.0中 vm.$dispatch 和 vm.$broadcast 被棄用，改用$emit,$on

vm.$on( event, callback )

監聽當前例項上的自定義事件。事件可以由vm.$emit觸發。回撥函式會接收所有傳入事件觸發函式的額外引數。

vm.$emit( event, […args] )

觸發當前例項上的事件。附加引數都會傳給監聽器回撥。

例子：

//父元件
<template>
    <ratingselect @select-type="onSelectType"></ratingselect>
</template>
<script
 
>
    data () {
      return {
        selectType: 0,
    },
    methods: {
      onSelectType (type) {
        this.selectType = type
      }
    }
</script>

父元件使用@select-type="onSelectType"監聽由子元件vm.$emit觸發的事件，通過onSelectType()接受從子元件傳遞過來的資料，通知父元件資料改變了。

// 子元件
<template>
  <div>
    <span
 
 @click="select(0, $event)"  :class="{'active': selectType===0}"></span>
    <span @click="select(1, $event)"  :class="{'active': selectType===1}"></span>
    <span @click="select(2, $event)"  :class="{'active': selectType===2}"></span>
  </div>
</template>
<script
 
>
    data () {
      return {
        selectType: 0,
    },
    methods: {
        select (type, event) {
            this.selectType = type
            this.$emit('select-type', type)
      }
    }
</script>

子元件通過$emit來觸發事件，將引數傳遞出去。

父子傳參

轉自：https://www.cnblogs.com/ygtq-island/p/6864477.html

先定義一個子元件，在元件中註冊props

在父元件中，引入子元件，並傳入子元件內需要的值

這種方式只能由父向子傳遞，子元件不能更新父元件內的data

在元件上使用v-model（雙向傳參）

來自官網上的解釋：

自定義事件可以用於建立支援v-model的自定義輸入元件。

但是首先我們得記住之前的v-model的解釋，也就是

<input v-model="searchText">

等價於

<custominput 
v-bind:value="searchText"
v-on:input="searchText=$event">
</custominput>

為了能夠使它正常工作，這個元件內的<input>必須：1、將其value特性繫結到一個名為value的prop上； 2

在其input事件被出發的時候，將新的值通過自定義的input時間丟擲！

故要寫出如下程式碼：

Vue.component('custom-input',{
    props:['value'],
    template:`
    <input v-bind:value="value"
    v-on:input="$emit('input',$event.target.value)">
    `
})

現在v-model就可以在元件上完美地工作起來

<custom-inpu v-model="searchText"></custome-input>

下面來一個朋友應用的例子：

自定義元件sidebar,要實現

<sidebar v-model="active"></sidebar>

父元件滿足條件：data裡面要有active元素

子元件滿足條件：1、類似於父子單向傳參，子元件中要有props名為value

2、類似於子父傳參，（在子元件中設定active資料（只是個人用）），在子元件中進行監聽

引數傳入： value(val) {

if(val) {

嘻嘻嘻可以在正常使用啦，以後再用還會進行其他優化