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 () {
// 子传父，需要通过自定义事件来实现
// 1. 注册自定义事件 -- 注意 自定义事件名不要使用驼峰命名法!
this.$emit('son-btn', { sondata: this.sondata })
}
},
}
</script>
//父组件
<template>
<div class="element">
<h3>父组件</h3>
<!-- son-btn是子组件注册的自定事件，里面携带着要传递的参数 -->
<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实例作为事件中心，利用它来监听本身的自定义事件
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 () {
// 触发事件中心的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 () {
// 监听事件中心的max-brother事件
// 这里的第二个参数必须使用箭头函数
tmpCom.$on('max-brother', val => {
this.brother = val
})
}
}
</script>
4，注入依赖provide/inject使用
这种方式就是vue中依赖注入，该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。
provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。
- provide 钩子用来发送数据或方法。
- inject钩子用来接收数据或方法
//父组件
data () {
return {
pimsg: '我是父组件的值',
num: 99999
}
},
provide () {
return {
num: this.num
}
},
//子组件
inject: ['num'],
5，ref / $refs
这种方式也是实现父子组件之间的通信
ref：这个属性用在子组件上，它的用法就指向了子组件的实例，可以通过实例来访问组件的数据和方法
//子组件
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 并不能保证顺序，并且访问的数据也不是响应式的。//子组件 <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拿到的是所有的子组件的实例，它是一个数组，并且是无序的
在根组件 #app 上拿 $parent 得到的是 new Vue()的实例，在这实例上再拿 $parent 得到的是undefined，而在最底层的子组件拿 $children 是个空数组
$children 的值是数组，而 $parent是个对象
