1，父傳子:自定義事件配合props
父組件
<template>
<div class="element">
<h3>父組件</h3>
<!-- 父組件向子組件傳值通過自定事件 -->
<son-com :abc="pimsg"></son-com>
</div>
</template>
<script>
//導入子組件
import sonCom from '@/components/SonCom.vue'
export default {
components: {
sonCom
},
data () {
return {
pimsg: '我是父組件的值'
}
}
}
</script>
//子組件
<template>
<div class="">
<h4>子組件</h4>
<p>父組件傳過來的值：{{abc}}</p>
</div>
</template>
<script>
export default {
// 父組件傳過來的值通過props接收,子組件便可以使用
props: ['abc']
}
</script>
2，子傳父 自定義事件配合 $emit
//子組件
<template>
<div class="">
<h4>子組件</h4>
//子組件要向父組件傳遞值的按鈕
<input type="button" value="子組件傳值" @click="sonbtn">
</div>
</template>
<script>
export default {
data () {
return {
sondata: '我是子組件的值'
}
},
methods: {
sonbtn () {
// 子傳父，需要通過自定義事件來實現(xiàn)
// 1. 注冊自定義事件 -- 注意 自定義事件名不要使用駝峰命名法!
this.$emit('son-btn', { sondata: this.sondata })
}
},
}
</script>
//父組件
<template>
<div class="element">
<h3>父組件</h3>
<!-- son-btn是子組件注冊的自定事件，里面攜帶著要傳遞的參數(shù) -->
<son-com @son-btn="sonbtns($event)"></son-com>
</div>
</template>
<script>
import sonCom from '@/components/SonCom.vue'
export default {
components: {
sonCom
},
data () {
return {
pimsg: '我是父組件的值'
}
},
methods: {
sonbtns (val) {
// val===> { "sondata": "我是子組件的值" }
this.pimsg = val.sondata
}
}
}
</script>
3姻政，兄弟組件之間的傳遞 -eventBus事件總線
新建一個.js的文件作為中間件
作為事件中心管理組件之間的通信
import Vue from 'vue'
// 定義一個新的vue實例作為事件中心，利用它來監(jiān)聽本身的自定義事件
const tmpCom = new Vue()
export default tmpCom
//兄弟組件之====>大兄弟
<template>
<div class="">
<h4>第一個兄第組件</h4>
<input type="button" value="我是大兄弟" @click="maxbrother">
</div>
</template>
<script>
//引入中間件
import tmpCom from '@/router/middleware'
export default {
data () {
return {
brotherdata: '我是大兄弟'
}
},
methods: {
maxbrother () {
// 觸發(fā)事件中心的max-brother事件
tmpCom.$emit('max-brother', this.brotherdata)
console.log(this.brotherdata)
}
},
created () {}
}
</script>
//兄弟組件之====>小兄弟
<template>
<div class="">
<h4>第二個兄第組件</h4>
<p>{{brother}}</p>
</div>
</template>
<script>
//引入中間件
import tmpCom from '@/router/middleware'
export default {
data () {
return {
brother: '我是小兄弟'
}
},
mounted () {
// 監(jiān)聽事件中心的max-brother事件
// 這里的第二個參數(shù)必須使用箭頭函數(shù)
tmpCom.$on('max-brother', val => {
this.brother = val
})
}
}
</script>
4岂嗓，注入依賴provide/inject使用
這種方式就是vue中依賴注入汁展，該方法用于 父子組件之間 的通信。當然這里所說的父子不一定是真正的父子，也可以是祖孫組件食绿，在層數(shù)很深的情況下侈咕，可以使用這種方式來進行傳值。就不用一層一層的傳遞數(shù)據(jù)了器紧。
provide和inject是vue提供的兩個鉤子耀销，和data、methods是同級的铲汪。并且provide的書寫形式和data一樣熊尉。
- provide 鉤子用來發(fā)送數(shù)據(jù)或方法焚挠。
- inject鉤子用來接收數(shù)據(jù)或方法
//父組件
data () {
return {
pimsg: '我是父組件的值',
num: 99999
}
},
provide () {
return {
num: this.num
}
},
//子組件
inject: ['num'],
5麸俘，ref / $refs
這種方式也是實現(xiàn)父子組件之間的通信
ref：這個屬性用在子組件上，它的用法就指向了子組件的實例轻纪，可以通過實例來訪問組件的數(shù)據(jù)和方法
//子組件
export default {
data () {
return {
name: '我是張三'
}
},
methods: {
sayHello () {
console.log('我是李四')
}
}
}
//父組件
<template>
<child ref="child"></child>
</template>
<script>
import child from './child.vue'
export default {
components: { child },
mounted () {
console.log(this.$refs.child.name); // '我是張三'
this.$refs.child.sayHello(); // 我是李四
}
}
</script>
6,
children
-
使用$parent可以讓組件訪問父組件的實例（訪問的是上一級父組件的屬性和方法）齿梁。 使用 $children 可以讓組件訪問子組件的實例催植，但是， $children 并不能保證順序勺择，并且訪問的數(shù)據(jù)也不是響應式的创南。//子組件 <template> <div> <span>{{message}}</span> <p>獲取父組件的值為: {{parentVal}}</p> </div> </template> <script> export default { data() { return { message: '張三' } }, computed:{ parentVal(){ return this.$parent.msg; } } } </script>
//父組件
<template>
<div class="hello_world">
<div>{{msg}}</div>
<child></child>
<button @click="change">點擊改變子組件值</button>
</div>
</template>
<script>
import child from './child.vue'
export default {
components: { child },
data() {
return {
msg: 'abc'
}
},
methods: {
change() {
// 獲取到子組件
this.$children[0].message = '李四'
}
}
}
</script>
通過 $parent 訪問到的是上一級父組件的實例，可以使用 $root 來訪問根組件的實例
在組件中使用$children拿到的是所有的子組件的實例省核，它是一個數(shù)組稿辙，并且是無序的
在根組件 #app 上拿 $parent 得到的是 new Vue()的實例，在這實例上再拿 $parent 得到的是undefined芳撒，而在最底層的子組件拿 $children 是個空數(shù)組
$children 的值是數(shù)組邓深，而 $parent是個對象
