vue父子元件怎麼傳值

2021-09-13 11:53:40 字數 850 閱讀 1117

背景：最近在做vue的專案，因為頁面的邏輯比較複雜，**量較多，所以就想抽離出一些元件放到component裡面。問題就隨之來了。

因為vue不提倡在子元件中修改父元件的值，所以如果要這樣操作的話就要麻煩一步，而我正好需要這樣的操作，於是就查閱了資料

先上父元件的**，引用了exp-group子元件

grpvisible 和 grpdata 是傳給子元件的屬性，乙個是普通型別，乙個是物件

grpvisible: false,
接下來我要在子元件中改變這兩個屬性的值傳給父元件，先要在子元件中定義一下

props: ,


grpdata: 


},
首先普通型別的 grpvisible 屬性如果要修改，需要定義乙個變數將 grpvisible 值複製給這個變數，然後再修改這個變數，傳遞給父元件，具體見**

let demo1 = this.grpvisible


demo1 = true


this.$emit('updatedata', demo1) //子元件
父元件通過acceptdata的引數value接收這個值

acceptdata (value) , //父元件
如果是物件的話，就需要用object.assign拷貝乙份新的賦值給乙個變數，然後修改這個變數，傳遞給父元件，**如下：

let demo1 = object.assign({}, this.grpdata)


this.$emit('updatedata', demo1)

Vue元件傳值 父子元件傳值

父元件可以引入 使用子元件，從業務上看，該父元件有可能對子元件有個性化需求，為了體現元件的靈活多變，可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值，具體通過pro...

父子組建傳值 vue 父子元件傳值

父元件傳給子元件 子元件通過props方法接收資料 子元件傳給父元件 通過 emit方法傳遞引數 一 props方法 1.靜態傳值 父元件中子元件的標籤設定乙個自定義屬性並賦值 子元件中通過props方法接收 export default 2.動態傳值 根據父元件中值的變化，動態改變子元件中的值 父...

vue父子元件傳值

一.父元件傳給子元件 父元件是parent.vue，子元件是children.vue。1.父元件引入子元件模組，在parent.vue的script中寫以下 並在components中註冊該元件 import centerfigner from components children 在templa...