Vue中父元件與子元件之間的通信

prop 父元件向子元件傳遞資料, 單向綁定

$refs 父元件調用子元件裡的屬性和方法

$emit 子元件向父元件傳遞消息

建立項目

$ vue create demo
$ cd demo
$ npm run serve      

1、父元件引用子元件

components/Child.

vue

<template>
  <h2>子元件</h2>
</template>      

App.vue

<template>
  <div id="app">
    <h2>父元件</h2>

    <!-- 3、使用子元件 -->
    <Child></Child>

  </div>
</template>

<script>
// 1、導入子元件
import Child from "@/components/Child.vue";

export default {
  name: "app",

  // 2、注冊元件
  components: {
    Child // 鍵名與變量名相同， 等價于 Child: Child
  }
};
</script>      

2、父元件給子元件傳值

components/Child.vue

<template>
    <div>
        <h2>子元件</h2>
        <p>{{message}}</p>
    </div>
</template>

<script>
export default {
    name: "child",

    // 子元件屬性，用于接收父元件資料, props是單向綁定
    props:[
        "message"
    ]
}
</script>      

<template>
  <div id="app">
    <h2>父元件</h2>
    
    <!-- 父元件通過屬性給子元件傳值 -->

    <!-- 靜态綁定-->
    <Child message="hello"></Child>

    <!-- 動态綁定 -->
    <Child v-bind:message="message"></Child>

  </div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
  name: "app",

  data() {
    return {
      message: "hello child"
    };
  },
  
  components: {
    Child
  }
};
</script>
      

3、父元件操作子元件資料，方法

<template>
    <div>
        <h2>子元件</h2>
        
        <p>{{message}}</p>
        
    </div>
</template>

<script>
export default {
    name: "child",
    
    // 子元件屬性
    data(){
        return {
            message: "",
        }
    },

    // 子元件方法
    methods:{
        setMessage(msg){
            this.message = msg;
        }
    }
}
</script>      

<template>
  <div id="app">
    <h2>父元件</h2>

    <!-- 注冊子元件引用資訊 -->
    <Child ref="child"></Child>

    <button @click="setChildMessage">修改子元件資料</button>

    <button @click="callChildMessage">調用子元件方法</button>

  </div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
  name: "app",

  components: {
    Child
  },

  methods: {
    setChildMessage() {
      this.$refs.child.message = "設定子元件屬性"
    },

    callChildMessage(){
      this.$refs.child.setMessage("調用子元件方法");
    }
  }
};
</script>      

$refs

不是響應式的，隻在元件渲染完成後才填充

4、子元件給父元件傳值

<template>
  <div>
    <h2>子元件</h2>

    <!-- 點選按鈕将會給父元件傳值 -->
    <button @click="clickButton">子元件按鈕</button>

  </div>
</template>

<script>
export default {
  name: "child",

  methods: {
    clickButton() {
      // 向父元件發送信号  vm.$emit(event, args)
      this.$emit("clickButton", "子元件的按鈕被點選");
    }
  }
};
</script>
      

<template>
  <div id="app">
    <h2>父元件</h2>

    <!-- 處理子元件的按鈕點選事件 -->
    <Child @clickButton="childClickButton"></Child>

  </div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
  name: "app",

  components: {
    Child
  },

  methods: {
    // 接收處理子元件傳遞過來的資料
    childClickButton(message) {
      console.log(message);
    }
  }
};
</script>      

參考：

1. vue之父子元件間通信執行個體講解(props、

   $ref

   、

   $emit

   )
2. 【vue元件之間互相傳值：父傳子，子傳父】