前端最基础的就是 HTML+CSS+Javascript
。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS
),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。
组件开发在 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> ` } })
父组件:
<v-avatar avatar="https://www.lilnong.top/favicon.ico"></v-avatar>
子组件:
Vue.component('v-avatar', { props: ['avatar'], template: '<img :src="avatar">' })
测试地址: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
的方式更常用
<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')
的模式触发事件取而代之。