Vue2 使用sync 数据从 : 回流; 封装一个子父双向数据绑定的组件

[stars-oceans]

[Vue2 使用sync 数据从 : 回流; 封装一个子父双向数据绑定的组件

父组件

<template>
  <div>
    <!-- 子的载入点 -->
    <Z :text.sync="data"></Z>
    <h1>父亲数据</h1>
    {{ data }}
  </div>
</template>

<script>
import Z from '@/components/z'
export default {
  components: { Z },
  data() {
    return {
      data: '父传入的数据数据'
    }
  },
}
</script>

子组件

<template>
  <div>
    <!-- 子组件 -->
    {{ text }}
  <input type="text" :value="text" ref="inputTest" @input="ipt">
  </div>
</template>

<script>
export default {
  props : ['text'],

  methods:{
    ipt(){
      // 这个地方改的不是 text 因为 props 是不能被修改的
      //  这里给的是 父组件的 data 数据，是通过 :text 回流回去的
      // 可以像我这样看
      // TODO: 注意这里 : 要写好不能有空格
        this.$emit('update:text', this.$refs.inputTest.value)
    }
  }
}
</script>