看一下下面的代码示例，就能懂这句话了。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值
<input v-model="searchText" /> <input v-bind:value="searchText" v-on:input="searchText = $event.target.value" /> // 当把v-model用在组件上 <custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input>
为了让它正常工作，这个组件内的 <input> 必须：将其 value 特性绑定到一个名叫 value 的 prop 上在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出，即this.$emit('input',changedValue)
自定义 v-model
为啥要自定义组件的 v-model 呢，因为数据不符合要求呗。你的输入值不可能总是 value ，你的事件不可能总是 input，具体详见
sync（双向绑定语法糖）
vue 真的是方便了开发者很多，站在开发者的角度考虑，很大的提升开发效率
以 update:myPropName 的模式触发事件取代双向绑定this.$emit('update:title', newTitle)，具体详见
Function 通过 prop 传入
本来想放在 prop 部分的，但是个人觉得其实它和 emit/on 更有关系一点
有读者可能会问，为什么不能把子组件里面的事件 emit 出来，通过父组件处理？然后传入一个控制子组件的 prop 属性。
我想说的是，可以，但是这样真的很麻烦，子组件内部的状态却要依赖父组件传值。
该组件内部的状态，我们需要把它暴露出来嘛？我觉得不需要，组件内部的状态就让它处于组件内部
但是可以通过传入 function（你可以理解为一个钩子），参与组件状态变更的行为。比如很好用的拖拽库,Vue.Draggable控制元素是否被拖动的行为。
Vue.Draggable可以传入一个 move 方法，我们看一下它如何处理的。
onDragMove(evt, originalEvent) { const onMove = this.move; // 如果没有传入move，那么返回true，可以移动 if (!onMove || !this.realList) { return true; } const relatedContext = this.getRelatedContextFromMoveEvent(evt); const draggedContext = this.context; const futureIndex = this.computeFutureIndex(relatedContext, evt); Object.assign(draggedContext, { futureIndex }); const sendEvt = Object.assign({}, evt, { relatedContext, draggedContext }); // 组件行为由传入的move函数控制 return onMove(sendEvt, originalEvent); }
这样做的好处，就是组件内部自由一套运行逻辑，但是我可以通过传入 function 来干预。我没有直接修改组件内部状态，而是通过函数（你可以称它为钩子）去触发，方便调试组件，使得组件行为具有可预测性
父组件直接操作子组件
很少有这样的骚操作，但是由于数据和操作的复杂性，当数据结构复杂，嵌套过深的情况下，父组件很难对于子组件的数据的精细控制
因此，如果不得已而为之，请在文档里，把子组件可以调用的方法暴露出来，供使用者使用。使用这种组件比较麻烦，得去看文档，没有文档的只好去看源码
ElementUI的tree组件提供了很多方法，用于父组件去操作子组件。
eg:this.$refs.tree.setCheckedKeys([]);
插槽
HTML <slot> element 是 Web Components 技术的一部分，是自定义 web 组件的占位符，vue 里面的 slot 的灵感来自 Web Components 规范草案，具体见文档
默认插槽
能用默认插槽就不要使用具名插槽，我真的不想使用你这个组件的时候还去翻看你的插槽叫什么名字
之前我司一个网页模板 三个插槽，header，body，footer，我用的是真的难受，每次都记不得，看似三个单词都挺熟悉的，但是其实 head,content,foot 这些单词也都行啊，谁知道用啥（可能我老了吧，组件如果不是必要尽量不要让人有记忆成本）。
后备内容
就是给组件里面的插槽定义默认值，它只会在没有提供内容的时候被渲染。建议用上插槽就给它添加默认内容
封装他人组件
有些时候我们可能是对他人的组件进行封装，这里强烈推荐使用v-bind="$attrs" 和 v-on="$listeners"。 vm.$attrs 是一个属性，其包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。这些未识别的属性可以通过 v-bind="$attrs" 传入内部组件。未识别的事件可通过v-on="$listeners"传入
举个例子，比如我创建了我的按钮组件myButton，封装了 element-ui 的 el-button 组件（其实什么事情都没做），在使用组件 <my-button />时，就可以直接在组件上使用 el-button 的属性,不被 prop 识别的属性会传入到 el-button 元素上去