父子组件之间相互传参

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,   //将整个对象一起传给父组件
       })