Vue 父子元件傳值

1.父元件向子元件傳值

父元件通過props的方式向子元件傳值

2.子元件向父元件傳值

子元件通過$emit的方式向父元件傳值

$emit繫結乙個自定義事件, 當這個語句被執行時, 就會觸發事件並將引數傳遞給父元件,父元件通過v-on監聽並接收引數。

3.vue有乙個特性——單向資料流

父元件可以向子元件傳遞資料，子元件只能接收，但不能直接修改，可以通過拷貝乙個資料的副本進行修改。

舉個栗子：

假如，有個慷慨的父元件想把100w傳給他的子元件，這是完全ojbk的！

那這個接收到了100w的子元件只能夠去用它，而不能去改它。（給你多少就是多少，想往後邊加了零？門都沒有！）

而之所以vue有這個單項資料流的概念，原因在於：一旦你的子元件接收到的資料並不是乙個基礎型別的資料，而是乙個類似於object物件（也就是引用形式的資料）的時候，在子元件裡面改變了這個資料裡的一些內容，還有可能對其他的子元件造成影響。因為接收的這個引用型的資料可能還被其他的子元件使用著，你一改，可能就全改了。

那如果我硬要改呢？[狗頭]

其實我們可以在子元件裡定義乙個data（一定得是乙個函式，並且return乙個物件）

把父元件傳來的資料copy乙份，放到我子元件自己的data裡面。這樣的話，值是我自己的，我就可以去改我自己的值，完全符合科學道理化學物理。。perfect！

kangkang示例**：

>

"root"
>
:count
='1'
@change
="handlechange"
>
counter
>
:count
='1'
@change
="handlechange"
>
counter
>
>
}div
>
div>
>
// 父元件通過屬性的形式，向子元件counter傳遞了乙個名叫count的資料，子元件需要通過props來接收，並直接在模板中使用
var counter =}'
,data()
},methods:},
}var vm =
newvue(,
data:
,            methods:}}
)script
>
body
>

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...