关于props 和事件的几个问题。

来源：3-9 Vue的组件之自定义双向绑定

qq_缺南摸了个北_0

2019-06-20

<body>
  <div id='app'>
    {{valueFromParent}}
    <comp-one :value-from-parent='valueFromParent' @input='handlerInput'></comp-one>
  </div>
</body>
<script>
  const CompOne = {
    props:['valueFromParent'],
    template: `<div>
        <input type='text' :value='valueFromParent' @input='handlerInput' />
      </div>`,
    methods: {
      handlerInput (e) {
        this.$emit('input', e.target.value)
      }
    },
  }

  var app = new Vue({
    el: '#app',
    data: {
      valueFromParent: '来自父组件的数据'
    },
    methods: {
      handlerInput (newVal) {
        this.valueFromParent = newVal
      }
    },
    components: {
      CompOne
    },
  })
</script>

有几个疑问：

props 可以理解成在标签级别传递给组件的一些（外来数据），就和在HTML标签上写data-xxx其实是一样的。如果传递的是v-bind形式，那么正好就和父组件产生联系了。如果传递的是单纯的字符串格式，其实也父组件也没多大关系。

<div data-id="1"></div> <comp-one data-id='1'></comp-one>

事件由compone触发，也由compone监听。也就是说事件的监听和触发都是由同一个对象完成的。Vue肯定在prototype上实现了 $on $emit 这两个实例方法。并在内部实现了监听触发机制。而提供事件监听方法，正好在它的父组件内部定义，于是就建立了父子组件之间通信的通道了。

<comp-one :value-from-parent='valueFromParent' @input='handlerInput'></comp-one>
// 就和在普通的HTML元素上的事件也是由元素本身监听一样。
<button @click='hanlderClick'></button>

组件间的 v-model.

我看这个例子，

首先使用 props，将父组件的数据传递给子组件。
子组件中的input利用 :value 绑定了一下这个传递过来的数据，仅仅只是展示了一下。
后续 input 的修改实现组件间的 v-model 仍然还是利用事件机制。
父组件提供事件响应方法，并在其内部调用 this.valueFromParent=arguments[0]. 基于data 被 Object.defineProperty 代理了，所以也就完成了自生的显示的变化。