实现双向数据流

    1. //子组件
    2. <template>
    3. <input type="checkbox" :checked="value"   @change="changed"/>
    4. </template>
    6. <script lang="ts">
    7. import { Vue, Component,Model } from "vue-property-decorator";
    9. @Component({})
    10. export default class Hello extends Vue {
    11.   @Model('change') value !: boolean
    13.   changed(ev:any) {
    14.     this.$emit('change', ev.target.checked)
    15.   }
    16. }
    17. </script>
    1. //父组件
    2. <template>
    3.   <div id="app">
    4.     <Hello v-model="value" @change="onChange"/>
    5.   </div>
    6. </template>
    8. <script lang="ts">
    9. import { Vue, Component, Model } from "vue-property-decorator";
    10. import Hello from './components/Hello.vue'
    11. @Component({
    12.   components:{
    13.     Hello
    14.   }
    15. })
    16. export default class App extends Vue {
    17.   private value:boolean = true
    18.   onChange(val:any){
    19.     console.log(val)
    20.   }
    21. }
    22. </script>