0
点赞
收藏
分享

微信扫一扫

vue数据----父传子/子传父/兄弟相传

前端王祖蓝 2022-02-08 阅读 66

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);
            })

举报

相关推荐

0 条评论