技術標籤：vue.js

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,   //將整個物件一起傳給父元件
       })