vue父子组件及非父子组件之间的传值

一、父组件向子组件传值
在vue中通常使用props向子组件传递数据

1.创建子组件,在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props,然后创建一个名为message的属性
在这里插入图片描述
3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值
在这里插入图片描述
4.保存修改的文件,查看浏览器
在这里插入图片描述
5.我们依然可以对message的值进行v-bind动态绑定
在这里插入图片描述
此时浏览器中

在这里插入图片描述
父组件向子组件传值成功

总结一下:
1.子组件在props中创建一个属性,用以接收父组件传过来的值
2.父组件中注册子组件
3.在子组件标签中添加子组件props中创建的属性
4.把需要传给子组件的值赋给该属性

二、子组件向父组件传值
1.在子组件中创建一个按钮,给按钮绑定一个点击事件
在这里插入图片描述
2.在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数
在这里插入图片描述
3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

在这里插入图片描述
4.保存修改的文件,在浏览器中点击按钮
在这里插入图片描述
子组件向父组件传值成功
总结一下:
1.子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2.将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
4.在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

三、非父子组件之间的传值
1.公共实例文件bus.js,作为公共数控中央总线

import Vue from "vue";
export default new Vue();

2.第一个组件 first.vue

import Bus from '../bus.js';
export default {
  name: 'first',
  data () {
    return {
      value: '我来自first.vue组件!'
    }
  },
  methods:{
    add(){// 定义add方法,并将msg通过txt传给second组件
      Bus.$emit('txt',this.value);
    }
  }
}

3.第二个组件second.vue

import Bus from '../bus.js';
export default {
  name: 'second',
  data () {
    return {
    }
  },
  mounted:function(){
    Bus.$on('txt',function(val){//监听first组件的txt事件
      console.log(val);
    });
  }
}

这样,就可以在第二个非父子关系的组件中,通过第三者bus.js来获取到第一个组件的value

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值