组件 (Component) 是 Vue.js 最壮大的功用之一。组件能够扩大 HTML 元素,封装可重用的代码。
组件的建立和注册
我们能够运用 Vue.component(tagName, options)
注册一个全局组件。
<!--全局注册-->
<template>
<div id="app">
<my-component></my-component>
</div>
</template>
<script>
// 全局注册组件
Vue.component('my-component', {
template: '<div>我的组件</div>'
})
// 建立根实例
new Vue({
el: '#app'
})
</script>
<!--衬着后的HTML-->
<div id="app">
<div>我的组件</div>
</div>
我们还能够经由历程某个 Vue
实例/组件的实例选项 components
注册仅在其作用域中可用的组件,即部分组件。
<!--部分注册-->
<template>
<div id="app">
<my-component></my-component>
</div>
</template>
<script>
var Child = {
template: '<div>我的组件</div>'
}
new Vue({
el: '#app',
components: {
// 部分注册组件,<my-component> 将只在父组件模板中可用
'my-component': Child
}
})
</script>
<!--衬着后的HTML-->
<div id="app">
<div>我的组件</div>
</div>
运用prop
组件实例的作用域是伶仃的。父组件的数据须要经由历程 prop 才下发到子组件中。
<!--静态prop-->
<template>
<child message="哈喽"></child>
</template>
<script>
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 也能够在模板中运用
// 一样也能够在 vm 实例中经由历程 this.message 来运用
template: '<span>{{ message }}</span>'
})
</script>
假如想要通报一个变量到子组件中去,即传给子组件的值会追随父组件中该变量的值的变化而变化,我们能够用 v-bind
来动态地将 prop
绑定到父组件的数据。
<!--动态prop-->
<template>
<div id="dynamic-prop">
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>
</template>
<script>
new Vue({
el: '#dynamic-prop',
data: {
parentMsg: '父组件发过来的音讯'
}
})
</script>
我们还能够为组件的 prop
指定考证划定规矩。假如传入的数据不符合请求,Vue
会发出正告。这关于开辟给别人运用的组件异常有效。
<!--prop考证-->
<script>
Vue.component('example', {
props: {
// 基本范例检测 (`null` 指许可任何范例)
propA: Number,
// 多是多种范例
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数值且有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应该由一个工场函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义考证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
</script>
自定义事宜举行组件通讯
如今我们父组件能够运用 prop
通报数据给子组件。但子组件怎样跟父组件举行通讯呢?这里我们能够经由历程自定义事宜来完成。
详细点说就是运用 $on(eventName)
监听事宜,运用 $emit(eventName, optionalPayload)
触发事宜。
<template>
<div id="message-event">
<p v-for="msg in messages">{{ msg }}</p>
<button-message v-on:message="handleMessage"></button-message>
</div>
</template>
<script>
Vue.component('button-message', {
template: `<div>
<input type="text" v-model="message" />
<button v-on:click="handleSendMessage">发送音讯</button>
</div>`,
data: function () {
return {
message: '哈喽'
}
},
methods: {
handleSendMessage: function () {
this.$emit('message', { message: this.message })
}
}
})
new Vue({
el: '#message-event',
data: {
messages: []
},
methods: {
handleMessage: function (payload) {
this.messages.push(payload.message)
}
}
})
</script>
运用插槽分发内容
为了让组件能够自由组合,我们须要一种体式格局来夹杂父组件的内容与子组件本身的模板。这个历程被称为内容分发。我们能够运用特别的 <slot>
元素作为原始内容的插槽,从而完成内容分发。
假如子组件模板包括一个 <slot>
插口,那末父组件的内容将会被衬着到插槽中。
<!--子组件模板-->
<templalte>
<div>
<h2>子组件的题目</h2>
<slot>
只要在没有要分发的内容时才会显现。
</slot>
</div>
</templalte>
<!--父组件模板-->
<template>
<div>
<h1>父组件的题目</h1>
<my-component>
<p>这是将会分发到子组件的一些初始内容</p>
</my-component>
</div>
</template>
<!--衬着后的HTML-->
<div>
<h1>父组件的题目</h1>
<div>
<h2>子组件的题目</h2>
<p>这是将会分发到子组件的一些初始内容</p>
</div>
</div>
当须要有多个插槽时,我们能够在<slot>
元素上用一个特别的特征 name
来进一步设置怎样分发内容。多个插槽设置差别的名字,这时候签字插槽将婚配内容片断中有对应 slot
特征 name
的元素。
<!--layout 子组件模板-->
<template>
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<!--父组件模板-->
<template>
<layout>
<h1 slot="header">头部题目</h1>
<p>主体内容的一个段落。</p>
<p slot="footer">尾部版权信息</p>
</layout>
</template>
<!--衬着后的HTML-->
<div class="container">
<header>
<h1>头部题目</h1>
</header>
<main>
<p>主体内容的一个段落。</p>
</main>
<footer>
<p>尾部版权信息</p>
</footer>
</div>
总结
本节重要知识点是vue.js
中组件的建立和注册,父组件运用prop
向子组件通报数据并举行数据考证,运用自定义事宜举行组件间的通讯,运用插槽来使组件能够自由组合。vue.js
组件是vue
框架中最壮大的功用,学完后相信你对web组件化也会有肯定的了解了。