vue sync绑定数据

子组件通过input框修改父组件数据
用到了.sync双向绑定数据

父组件：<coment-children v-if="show" :isShow.sync="show" :isTxt.sync="fathertxt"></coment-children>
子组件:this.$emit('update:isTxt', this.childtxt)

一、child.vue代码如下：

<template>
  <div style="width:200px;height:200px;background:red;">
    我是helloWorld模块的子组件
    <button @click="$emit('update:isShow',false)">我是子组件的按钮点我隐身</button>
    <input v-model.lazy="childtxt" />
    <br />
    {{childtxt}}
    <hr />
    <input type="text" value="1" v-on:input="inputFunc" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      childtxt: ''
    }
  },
  watch: {
    childtxt(newValue) {
      console.log(newValue);
      this.$emit('update:isTxt', this.childtxt)
    }
  },
  methods: {
    inputFunc() {
      console.log(this.childtxt)
    }
  }
}
</script>

二、father.vue代码如下：

<template>
  <div>
    <button @click="show = true">我是父组件的按钮</button>
    <coment-children v-if="show" :isShow.sync="show" :isTxt.sync="fathertxt"></coment-children>
    {{fathertxt}}
  </div>
</template>
<script>
import comentChildren from "./children";
export default {
  data() {
    return {
      show: false,
      fathertxt: 'fathertxt'
    }
  },
  components: {
    comentChildren
  }
};
</script>