0. vue数据传送介绍
a. 想在一个组件里面,引用另一个组件的数据
b. 可以用vuex或者本文写的三方法
c. 规律:父拿的都是key,子拿的是数据/函数
一. 父传子
1. 在需要使用父组件值的标签处,添加一个自定义属性
<!-- 1-->
<Header :father_son="cart_length"></Header>
2. 在父组件中赋值
cart_length: 12,
3. 在子组件中写一个props
// 父传子
props: ['father_son',],
4. 在子组件中使用
<b>{{ father_son }}</b>
二. 子传父
1. 在需要使用父组件值的标签处,添加一个自定义事件
<CartItem v-for="(cart_val,cart_index) in courseData" :key="cart_val.id"
@father_del="father_val(cart_index)"></CartItem>
2. 父组件写一个函数,进行逻辑处理
// 2 自动执行 子-父 都是父亲拿值,儿子拿key
father_val(val) {
// val 当前传的值
},
3. 子组件传值
this.$emit('father_del') // 3. 也可以传参 ,this.$emit('father_del',1)
三. 兄弟相传(需要借助一个公交车)
例子:A放值,B取值
首先都需要一个公交车
let bus = new Vue();
1. A 放值
bus.$emit('TestData','dbj')
2. B取值
bus.$on('TestData',(val)=>{
console.log(val);
})