vue 父子组件之间的相互传参
首先创建子组件的文件夹
在父组件的components中引入子组件的文件夹
components: {
Chat: () => import('@/components/Chat.vue'),
},
在父组件中使用组件
<Chat ref="zy_chat" @sendMsg="sendMsg" :chatInfoEn="chatInfoEn"></Chat> //通过v-bind后绑定的这个值 传递参数
但是注意是要用 v-bind: 绑定要传的值,不用v-bind直接把值放到标签上,会被当成html的节点属性解析的。
子组件内部肯定要去接受父组件传过来的值:props来接收:
chatInfoEn: {
required: true,
type: Object,
},
像这样接收就可以了。
接下来 子组件向父组件之间传值
// 我这里用的是对象
let newMessage2 = {
avatar: '',
content: content1 == ''? picture: content1,
id: `KF${
userInfo.user_id}`,
from_name: userInfo.user_name,
time_line: this.gettime,
type: 'service',
}
this.$emit('sendMsg', {
//sendMsg是父组件标签上定义的方法 触发父组件的一个方法,然后执行响应的操作
msg: newMessage2, //将整个对象一起传给父组件
})