vuejs如何設定父子通信
- 青灯夜游原創
- 2021-09-06 15:26:122069瀏覽
vuejs設定父子通訊的方法：1、父元件利用props向子元件傳遞資料；2、子元件透過「$emit」給父元件發送訊息；3、利用「.sync」語法糖； 4.利用「$attrs」和「$listeners」；5、利用privide和inject。
本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。
Vue 父子元件之間的通訊有幾種方式：
#props
$emit -- 元件封裝用的比較多
.sync -- 語法糖
$attrs 和$listeners -- 元件封裝用的比較多
privide 和inject -- 高階元件
以下將分別介紹
##1、 props
這個在日常開發中運用較多，簡單來說，我們可以透過props向子元件傳遞數據，就像一個水管一樣，父元件的資料從上往下流向子元件，不能逆流。這也是vue的設計概論單項資料流。<div id="app">
<child :content="message"></child>
</div>
// Js
let Child = Vue.extend({
template: '<h2>{{ content }}</h2>',
props: {
content: {
type: String,
default: () => { return 'from child' }
}
}
})
new Vue({
el: '#app',
data: {
message: 'from parent'
},
components: {
Child
}
})
2、$emit
官方介紹是觸發目前實例上得事件，附加參數都會傳給監聽器回呼。<div id="app">
<my-button @greet="sayHi"></my-button>
</div>
let MyButton = Vue.extend({
template: '<button @click="triggerClick">click</button>',
data () {
return {
greeting: 'vue.js!'
}
},
methods: {
triggerClick () {
this.$emit('greet', this.greeting)
}
}
})
new Vue({
el: '#app',
components: {
MyButton
},
methods: {
sayHi (val) {
alert('Hi, ' + val) // 'Hi, vue.js!'
}
}
})
3、.sync 修飾符
在vue1.x的時候，曾經作為雙向綁定功能存在，即子元件可以修改父元件中的值。因為它違反了單向資料流的設計理念，所以在vue2.x中被去掉了，但是在vue 2.3.0 以上的版本中又從新引入了這個 .sync 修飾符。但只作為一個編譯時的語法糖存在。它被擴展為一個自動更新父元件屬性的 v-on 監聽器。 在某些情況下，我們可能需要對一個 prop 進行「雙向綁定」。不幸的是，真正的雙向綁定會帶來維護上的問題，因為子元件可以修改父元件，且在父元件和子元件都沒有明顯的改動來源。 語法糖的寫法形式如下3aad4a5f8d6d21b85f13f5b7d90449ce d093019edc1fd049b9381d54424ed8e7所以我們可以用.sync 語法糖簡寫成如下形式
<text-document v-bind:title.sync="doc.title"></text-document>那麼如何做到雙向綁定呢，例如改變子元件文字方塊中的值同時改變父元件中的值，程式碼如下
<div id="app">
<login :name.sync="userName"></login> {{ userName }}
</div>
let Login = Vue.extend({
template: `
<div class="input-group">
<label>姓名:</label>
<input v-model="text">
</div>
`,
props: ['name'],
data () {
return {
text: ''
}
},
watch: {
text (newVal) {
this.$emit('update:name', newVal)
}
}
})
new Vue({
el: '#app',
data: {
userName: ''
},
components: {
Login
}
})程式碼裡只有一句話：this.$emit('update:name', newVal)官方語法是：update:myPropName 其中myPropName 表示要更新的prop值。當然如果你不用.sync 語法糖使用上面的.$emit 也能達到同樣的效果
4、 $attrs 和$listeners
官網對$attrs 的解釋如下： 包含了父作用域中不作為prop 被識別(且獲取) 的特性綁定(class 和style 除外)。當一個元件沒有宣告任何prop 時，這裡會包含所有父作用域的綁定(class 和style 除外)，並且可以透過v-bind="$attrs" 傳入內部元件－在建立高等級的元件時非常有用。 官網對 $listeners 的解釋如下: 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以透過 v-on="$listeners" 傳入內部元件——在創建更高層次的元件時非常有用。 $attrs 和$listeners 屬性像兩個收納箱，一個負責收納屬性，一個負責收納事件，都是以物件的形式來保存資料<div id="app">
<child
:foo="foo"
:bar="bar"
@one.native="triggerOne"
@two="triggerTwo">
</child>
</div>let Child = Vue.extend({
template: '<h2>{{ foo }}</h2>',
props: ['foo'],
created () {
console.log(this.$attrs, this.$listeners)
// -> {bar: "parent bar"}
// -> {two: fn}
// 这里我们访问父组件中的 `triggerTwo` 方法
this.$listeners.two()
// -> 'two'
}
})
new Vue({
el: '#app',
data: {
foo: 'parent foo',
bar: 'parent bar'
},
components: {
Child
},
methods: {
triggerOne () {
alert('one')
},
triggerTwo () {
alert('two')
}
}
})可以看到，我們可以透過$attrs 和$listeners 進行資料傳遞，在需要的地方進行呼叫和處理，還是很方便的。當然，我們還可以透過 v-on="$listeners" 一級級的往下傳遞，子子孫孫無窮無盡也！
5、privide 和inject
來看下官方對provide / inject 的描述： provide 和inject 主要為高階插件/元件庫提供用例。並不建議直接用於應用程式程式碼。而這對選項需要一起使用，以允許一個祖先組件向其所有子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裡始終生效。ab509c080ec9f7ec77efedb1cdcd4bed
1207412ca14c1d8bb1c5d564f723d29198f9e0de16d4632c0e387ffd4bb1294d
16b28748ea4df4d9c2150843fecfba68
let Son = Vue.extend({
template: 'c1a436a314ed609750bd7c7d319db4dason2e9b454fa8428549ca2e64dfac4625cd',
inject: {
house: {
default: '没房'
},
car: {
default: '没车'
},
money: {
// 长大工作了虽然有点钱
// 仅供生活费，需要向父母要
default: '￥4500'
}
},
created () {
console.log(this.house, this.car, this.money)
// -> '房子', '车子', '￥10000'
}
})
new Vue({
el: '#app',
provide: {
house: '房子',
car: '车子',
money: '￥10000'
},
components: {
Son
}
})更多列子可以參考element-ui源碼，其中的大量使用了該方法相關推薦：《vue.js教程》
以上是vuejs如何設定父子通信的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn