vue.js父子元件雙向傳輸資料(v-model在元件中的使用)

月亮販售快樂發表於2021-01-01

父子元件雙向傳值

  • 話不多說,來上帝視角
<div id="app"></div>
<script>
  Vue.component("ComponentA", {
    model:{
        event:"change",
    },
    methods: {
      handleClick() {
       this.count++;
       this.$emit("change",this.count);
      },
    },
    data() {
      return {
        count: 0,
      };
    },
    template: `<div>ComponentA
    <p>子元件{{count}}</p>
    <button @click="handleClick">click</button>
    </div>`,
  });
  app = new Vue({
    el: `#app`,
    template: `
    <div>{{msg}}
      <p>父元件{{count}}</p>
        <ComponentA v-model="count"></ComponentA>
    </div>`,
    data: {
      msg: "hello world",
      count:0,
    },
  });

父子元件雙向傳值

相關文章