文章目录
1.组件语法和全局&局部组件
组件可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树
1.1.语法
HTML:调用组件
<组件名></组件名>
JS:注册组件
全局组件
vue.component(组件名,{
template:`html代码`
};
局部组件:
new Vue({
...
components:{
组件名:{
template:`html代码`
}
}
});
1.2.例子:全局组件和局部组件
<body>
<div id="app">
<zujian></zujian>
</div>
</body>
<script>
// 全局组件
// Vue.component('zujian', {
// template: '<h1>我是全局组件</h1>'
// });
new Vue({
el: "#app",
// 局部组件
components: {
"zujian": {
template: '<h1>我是局部组件</h1>'
}
}
});
</script>
1.3.局部组件
局部组件需要在使用它的父组件中显式导入,并且只能在该父组件中使用。
优点:组件之间的依赖关系更加明确
2.组件绑定事件的方法直接在写在组件注册中
Vue.component("zujian", {
template: `<button @click="fn()">点击</button>`,
//直接在写在 template后面
methods: {
fn: function() {
console.log(2222);
}
}
});
var app = new Vue({
el: "#app",
// 无法访问:不能把fn写在这里
// methods: {
// fn: function() {
// console.log(2222);
// }
// }
});
一个组件可同时包含HTML+CSS+JS
3.父子组件
3.1.根组件root(不重要)
根组件是系统自带的,默认是所有全局组件的父组件
在用户编写
<div id="app">
</div>
<script>
var app = new Vue({
el: "#app"
});
</script>
时自动调用
3.2.全局定义的子组件和局部定义的子组件
代码
<div id="app">
<zujian></zujian>
<siblings></siblings>
</div>
<script>
// 注册全局组件zujian
Vue.component('zujian', {
template: `
<div style="background:blue">
我是zujian
<button @click="fn()">点击</button>
<!-- 调用子组件child -->
<child></child>
<!-- 调用子组件zjChild -->
<zjChild></zjChild>
</div>`,
methods: {
fn: function() {
console.log("hello zujian");
}
},
// 在zujian中直接注册zujian的局部子组件zjChild
components: {
zjChild: {
template: `<p>我是zjChild</p>`
}
}
});
// 注册zujian的兄弟全局组件siblings
Vue.component('siblings', {
template: `
<div style="background:red">
我是siblings
<!-- 调用子组件child -->
<child></child>
</div>`
});
// 注册一个全局组件child,并在其他组件中调用,让其成为公共子组件
Vue.component('child', {
template: `
<div style="color:white">
我是child
</div>`
});
var app = new Vue({
el: "#app"
});
</script>
结果:siblings组件无法调用zjChild子组件
4.注册组件时,template中的HTML结构必须包含一个根节点
即,template:{HTML结构}
中,不能出现多个div并列的情况
Vue.component('zujian', {
template: `
<div>hello</div>
<div>world</div>`
});
否则报错
5.组件编写方式与Vue实例的区别
- 注册组件时必须包含一个根节点
- 父子组件的data不共享
- 组件注册可以有data,computed,methods,但data必须是一个函数
data(){
return;
}