实现双向数据绑定

实现双向数据绑定

const CompOne = {
 props: ['value'],
 template: `
   <div>
     <input type="text"></input>
   </div>
 `,
}

new Vue({
  components: {
    CompOne,
  },
  template: `
    <div>
      <comp-one></comp-one>
    </div> 
  `,
}).$mount(root)

const CompOne = {
  props: ['value'], // 接收父组件传递的数据
  template: `
    <div>
      <input type="text" @input="handleInput" :value="value"></input> 
      // 添加一个input事件
      // 接收父组件传递的value
    </div>
  `,
  methods: {
    handleInput (e) {
      this.$emit('input', e.target.value) // 通过$emit，当 value 变化时通知父组件
    }
  }
}

new Vue({
  components: {
    CompOne,
  },
  data () {
    return {
      value: 'vue' 
    }
  },
  template: `
    <div>
    // value 为传递给子组件的数据
    // @input 接收子组件通过 $emit 传递的参数
      <comp-one :value="value" @input="value = arguments[0]"></comp-one> 
    </div> 
  `,
}).$mount(root)