亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

vue組件之間的通信

父組件App.vue

<template>
  <fieldset>
    <legend>組件間通信</legend>
    <!-- 使用父組件 Children.vue -->
    <!-- 向子組件傳值num 并接收Children.vue文件傳來的值-->
    <Children :num="num" @app_edit="app_edit"></Children>
    這是子組件Children.vue傳給父組件App.vue的值: {{ num }}
  </fieldset>
</template>
<script>
// 引入父組件 Parent.vue
import Children from "./components/Children";
export default {
  // 引入組件后 要在此注冊(cè)
  components: {
    Children,
  },
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    app_edit(e) {
      console.log("我是父文件的app_edit方法");
      // console.log(e);
      this.num = e;
    },
  },
};
</script>

子組件Parent.vue

<template>
  <div class="">
    <h1>{{ msg }}</h1>
   接受App.vue文件傳過來的值為:  {{num}} <hr>
    <button @click="add_num"> 每次+1</button>
    <button @click="cut_num"> 每次-1</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "這是子組件",
    };
  },
  props:['num'],
  methods: {
    add_num(){
        // console.log(this.num);
        console.log("Parent.vue文件下的add_num方法");
        // 將傳過來的值+1處理傳回App.vue
        this.$emit('app_edit',this.num+1);
    },
    cut_num(){
        // console.log(this.num);
        console.log("Parent.vue文件下的cut_num方法");
        // 將傳過來的值+1處理傳回App.vue
        this.$emit('app_edit',this.num-1);
    }
  },
};
</script>

最終效果

更多組件通信及生命周期參考：http://www.ouyangke.com/front/vue3/3Vue3%E7%BB%84%E4%BB%B6.html

批改老師：PHPz

批改狀態(tài)：合格

老師批語(yǔ)：