首页 > 代码库 > vue2.0 父子组件 通信
vue2.0 父子组件 通信
一、父组件传递数据给子组件 （ parent ==》 children ）
props 属性
》parent 组件 parent.vue
<parent>
<child :child-msg="msg"></child> //这里必须要用 - 代替驼峰
</parent>
data(){
return {
msg: [1,2,3]
};
}
》child 组件 child.vue
写法一 props: [‘childMsg‘] // 驼峰式 写法二 props: { childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告 } 写法三 props: { childMsg: { type: Array, // 类型 default: [0,0,0] //这样可以指定默认的值 } }
二、子组件传递数据给父组件 （ children ==》 parent ）
vue是单向数据传递，子组件想要改变数据，需通过触发自定义事件来通知父组件改变数据，从而达到改变子组件数据的目的.
》child 组件 child.vue
<template>
<button @click="sendToParent">点击按钮</button>
</template>
methods: {
sendToParent() {
this.$emit(‘childGet‘,‘父组件获取到子组件传递的数据‘); //主动触发
}
}
》parent 组件 parent.vue
<div>
<child @childGet="change" :msg="msg"></child> //监听子组件触发的childGet事件,然后调用change方法
</div>
methods: {
change(msg) { //参数msg是子组件传递的值
this.msg = msg; // 赋值给绑定的msg 属性
}
}
子组件与子组件之间通信 若项目逻辑较复杂，建议使用 vuex
vuex 介绍和具体使用见 官方文档 https://vuex.vuejs.org/
具体见demo https://github.com/136shine/study_demo/tree/master/vue-demo1
vue2.0 父子组件 通信
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。