Vue组件(Component)基础使用攻略

组件(Component)是Vue.js最强大的功能之一。
组件可以扩展HTML元素,封装可重用的代码在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。

注册

全局注册

代码如下:

1
2
3
Vue.component("my-component",{
template:"<div>my component!</div>"
});

局部注册

代码如下:

1
2
3
4
5
6
7
8
new Vue({
// ...
components: {
"my-component":{
template:"<div>my component!</div>"
}
}
});

使用

代码如下:

1
<my-component></my-component>

渲染之后,将会被替换为template所对应的内容

进阶

prop引用父组件数据

组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。
父组件的数据需要通过prop才能下发到子组件中。

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Vue({
// ...
data:{
message:"Hello Vue!"
},
components: {
"my-component":{
props:["message"],
template:"<span>{{ message }}</span>",
methods:{

}
}
}
});

这样,my-component就可以拿到父组件的数据message了
当然,也可以在子组件中定义自己的methods和data

扫一扫,请老师喝水