1. 程式人生 > 實用技巧 >vue元件傳值 | 子父元件

vue元件傳值 | 子父元件

一、子父元件

1、子元件獲得父元件中的值:通過v-bind方式繫結在子元件中

// 子元件中定義props
props: ['msg']
// 父元件中:
<deleteBar :msg='this.xx' :name='this.yy'></deleteBar>
//在以html元素方式插入子元件的位置,用:msg的方式繫結已經在子元件中定義的引數,='this.xx'引用父元件中的值

2、子元件中呼叫父元件中的方法

1> 繫結在子元件定義的元素位置,在子元件中用emit方法觸發,與傳遞值的方法相似

// 子元件:
// 用this.$emit()來觸發父元件中的方法,其中第一個值為被繫結的函式,之後為傳入的引數
methods: { closeForm: function () { this.$emit('closeDeletebar', false)
....... } }
// 父元件:
// 用@繫結一個將要在子元件中使用的函式
// =''引號中的函式為父元件的methods中的函式
<deleteBar @closeDeletebar='showDeleteBar' ></deleteBar>
    

2>用this.$parent.xx()來直接觸發。簡易方法。xx為父元件中定義的方法。

二、在vuex中定義整個工程中都需要用到的資料

三、eventbus,不好使,必須是及時傳,受生命週期限制