Vue 组件
组件开发在 Vue 使用中很常见，好处有很多 解耦、并行开发、复用 等等。
使用上也很简单，我们可以对比一下 elementUI 的 el-input 和 原生的 input。
<el-input v-model="val"> <input v-model="val">
注册组件
组件可以理解为可复用的 Vue 实例，所以与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。
全局注册组件
通过 Vue.component 进行全局注册，注册之后可以用任何地方，包括组件树中的所有子组件的模板中。
// 定义一个名为 v-input 的全局组件 Vue.component('v-input', { data: function () { // data 必须是一个函数 // 这样才能在多个位置使用时，多个组件不存在引用关系 return { val: '' } }, // template 必须有一个根节点。 // 每个组件必须只有一个根元素(every component must have a single root element ) template: ` <div> <input v-model="val"> val: {{val}}. </div> ` })
局部注册组件
局部注册就是在 components 里面写，只能用在当前组件模板中。
new Vue({ el: '#app', components: { 'v-input': { data: function () { // data 必须是一个函数 // 这样才能在多个位置使用时，多个组件不存在引用关系 return { val: '' } }, // template 必须有一个根节点。 template: ` <div> <input v-model="val"> val: {{val}}. </div> ` } })
组件通信
父子组件
父组件向子组件传值 props
父组件:
<v-avatar avatar="https://www.lilnong.top/favicon.ico"></v-avatar>
子组件:
Vue.component('v-avatar', { props: ['avatar'], template: '<img :src="avatar">' })
子组件向父组件传值 $emit
测试地址：https://www.lilnong.top/static/html/sf-a-1190000022616927-vue-emit.html
父组件:
<v-input :value="val" @input="val = $event"></v-input>
子组件:
Vue.component('v-input', { props: ['val'], template: '<input :value="val" @input="emitInput">', methods:{ emitInput(e){ this.$emit('input', e.target.value) } } })
使用 v-model
一般在我们使用中 v-model 的方式更常用
<input v-model="val"> <el-input v-model="val"></el-input>
那么 v-model 是如何实现父子组件通信的呢？
原生 DOM
<input v-model="val">
等价于
<input v-bind:value="val" v-on:input="val = $event.target.value" >
自定义组件
<v-input v-model="val"></v-input>
等价于
<v-input :value="val" @input="val = $event"></v-input>
从上面我们可以看到， v-model 类似于语法糖，本质上是通过绑定 value 和 input。
使用 .sync 修饰符
<text-document v-bind:title.sync="doc.title"></text-document>
等价于
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" ></text-document>
子组件中更新时： this.$emit('update:title', newTitle)
在有些情况下，我们需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。
推荐以
this.$emit('update:myPropName')
的模式触发事件取而代之。
跨层级
- vuex
- eventBus
