9Vue父子元件的傳遞方式

2022-05-07 11:27:13 字數 3507 閱讀 3899

寫個計數器元件，雛形如下：

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


meta 


name


="viewport"


content


="width=device-width, initial-scale=1.0"


>


<


script 


src="./vue.js"


>


script


>


<


title


>document


title


>


head


>


<


body


>


<


div 


id>


<


counter


>


counter


>


<


counter


>


counter


>


div>


body


>


<


script


>


varcounter= 


varvm


=new


vue(


})script


>


html


>
1.可以通過屬性傳值

注意：「count」和「:count」的區別。

<


body


>


<


div 


id>


<


counter 


:count


="0"


>


counter


>


<


counter 


:count


="2"


>


counter


>


div>


body


>



var counter=}


'} 


var vm=new


vue(


})
結果如下圖：

接下來做點選就+1的效果

var counter=}


', methods:


}} 


var vm=new


vue(


})
這裡直接操控count做+1動作，是可以實現需求的。但是控制台會警告：

這是因為vue不允許在子元件中修改父元件傳遞的值。假如父元件傳遞的值是乙個物件，那麼子元件接收的是這個物件的引用，如果這個物件還有其他元件在使用，我們修改了這個物件的值，就會造成其他元件的值的改變，這樣是不允許的。

解決方法：在子元件中用data建立乙個變數，將父元件的值賦給這個變數，通過改變data中的這個變數即可。

var counter=


},template:'}


', methods:


}} 


var vm=new


vue(


})
這樣計數器就可以實現了。

再加乙個將兩個計數器值求和的功能。

通過this.$emit設定就行

<


div 


id>


<


counter 


@inc


="handleinc"


:count


="0"


>


counter


>


<


counter 


@inc


="handleinc"


:count


="0"


>


counter


>


<


div>總計：}


div>


div>



var counter=


},template:'}


', methods:


}} 


var vm=new


vue(,


components:,


methods:}})
完整**：

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


meta 


name


="viewport"


content


="width=device-width, initial-scale=1.0"


>


<


script 


src="./vue.js"


>


script


>


<


title


>document


title


>


head


>


<


body


>


<


div 


id>


<


counter 


@inc


="handleinc"


:count


="0"


>


counter


>


<


counter 


@inc


="handleinc"


:count


="0"


>


counter


>


<


div>總計：}


div>


div>


body


>


<


script


>


varcounter


= },


template:'}


',methods:


}} 


varvm


=new


vue(,


components:,


methods:}})


script


>


html


>

vue 父子元件傳遞

子元件接收父元件的資料可以使用props和bind進行 父元件 監聽子元件觸發的changehi事件,然後呼叫changehi方法 子元件 props cdata 接收父元件傳遞 父元件要監聽子元件的事件發生可以使用emit和on進行，子元件必須要觸發事件，然後父元件才可以接收到。子元件 metho...

vue 父子元件的傳遞 非父子元件間的傳遞

1.父元件傳遞資料給子元件 父元件資料如何傳遞給子元件呢？可以通過props屬性來實現 父元件 這裡必須要用 代替駝峰 data 子元件通過props來接收資料 方式1 props childmsg 方式2 props 方式3 props 這樣呢，就實現了父元件向子元件傳遞資料.2.子元件與父元件通...

vue父子元件傳遞引數

父元件 展示如下 子元件 展示如下 向父元件傳值 以上 展示即可實現父子元件的資料傳遞。有一種場景 父元件需要在頁面初始化時請求介面獲取資料，此時父元件中引入了子元件，需向子元件傳遞資料，而此時父元件還並沒有完成請求，因此傳遞給子元件的資料為空。解決方法如下 1 在子元件中使用watch監聽 wat...