vue元件傳值 | 子父元件
阿新 • • 發佈:2020-09-08
一、子父元件
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為父元件中定義的方法。