vue入門學習—組件之間的通信
阿新 • • 發佈:2018-09-06
技術分享 默認 接收 參考 圖片 ima 屬性 log 對象 子組件可以通過
父組件傳遞數據給子組件
父組件數據可以通過props屬性傳遞給子組件
父組件:
<template> <div id="app" v-cloak> <my-component :msg=‘arr‘></my-component> </div> </template> <script> import MyComponent from ‘./components/MyComponent.vue‘ export default { name: ‘App‘, data: function () { return { arr: [1, 2, 3, 4, 5] } }, components: { MyComponent } } </script>
父組件通過給子組件的 msg 屬性綁定動態的數據,將數據傳遞給子組件
子組件(請忽略插槽 ):
<template> <div class="container"> <header> <slot name="header">這是header部分</slot> </header> <main> <slot :text =‘text‘>有分發的內容就不渲染,沒有就渲染</slot> </main> <footer> <slot name="footer">這是子組件中slot中的footer部分{{ msg }}</slot> </footer> </div> </template> <script> export default { data: function () { return { text: [‘果汁‘, ‘雪碧‘, ‘牛奶‘, ‘咖啡‘, ‘茶‘] } }, props: [‘msg‘], mounted () { // console.log(this.msg) // console.log(this.$props.msg) } } </script>
子組件可以通過props
接收數據
props: [‘msg‘]
也可以指定類型
props: {
msg: Array // 如果傳入的類型不對,會警告
}
還可以指定默認值
props: {
msg: {
type: Number,
default: 100 //可以指定默認的值 當父組件中未定義msg時顯示 100
}
}
如果指定的類型是對象或數組默認值必須從一個工廠函數獲取
default: function () {
return { arr: [1,2,3] }
}
驗證及其他屬性請查看官方文檔說明:
https://cn.vuejs.org/v2/guide/components-props.html#ad
子組件與父組件通信
那麽,如果子組件想要改變數據呢?這在vue中是不允許的,因為vue只允許單向數據傳遞,這時候我們可以通過觸發事件來通知父組件改變數據,從而達到改變子組件數據的目的.
子組件
<template>
<div class="container" @click="up(arr)">
<header>
<slot name="header">點我點我~~~</slot>
</header>
</div>
</template>
<script>
export default {
data: function () {
return {
arr: [{
id: 1,
name: ‘rose‘,
age: 18,
gender: ‘女‘
}, {
id: 2,
name: ‘skyler‘,
age: 18,
gender: ‘女‘
}, {
id: 3,
name: ‘jack‘,
age: 18,
gender: ‘男‘
}]
}
},
props: {
msg: {
type: Number,
default: 176
}
},
methods: {
up (arr) {
this.$emit(‘upup‘, arr)
}
}
}
</script>
子組件通過click事件觸發 upup 事件
父組件
<template>
<div id="app" v-cloak>
<my-component @upup="change"></my-component>
<ul v-for="item in info" :key="item.id">
<li>{{ item.name }}</li>
<li>{{ item.age }}</li>
<li>{{ item.gender }}</li>
</ul>
</div>
</template>
<script>
import MyComponent from ‘./components/MyComponent.vue‘
export default {
name: ‘App‘,
data: function () {
return {
info: ‘‘
}
},
components: {
MyComponent
},
methods: {
change (arg) {
this.info = arg
console.log(this.info)
}
}
}
</script>
非父子組件通信
如果兩個組件不是父子組件那麽如何通信呢?這時可以通過eventBus來實現通信.
所謂eventBus就是創建一個事件中心,相當於中轉站,可以用它來傳遞事件和接收事件.
公共的事件中心
非父子組件的通信查閱
參考: http://www.chairis.cn/blog/article/24
vue入門學習—組件之間的通信