摘要

用组件来扩展 HTML 元素,封装可重用的代码。

 

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:

一、局部组件(父子组件)

声子、挂子、用子

1.声明组件

var value= {
template: `<p>我是子口组件</p>`
}

2挂载组件

components: {
// key 是组件名,value 是组件对象
key: value
}

3.调用组件

template:`
<key/>
`,

注意:template 有且只有一个根节点

二、全局组件
Vue.component(tagName, options)

tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:

<tagName></tagName>
父子组件通讯

// 子组件
var Son = {
template: `
<div>我的名字:{{name}}</div>
`,
props: ['name']
}
new Vue({
el: ('#app'),
template: `
<key :name="namee"></key>
`,
data() {
return {
namee: '皮皮虾'
}
},
methods: {
},
components: {
key: son
}
})

在父组件中的数据,通过 v-bind:*** 的形式,将父组件中的 data,发送给子组件。而子组件呢,通过 props 的定义,获取到了父亲的数据。