Vue的自定义组件
自定义组件的作用是为了提高复用性,减少重复的代码,提高可维护性
全局组件
语法:vue.component("自定义组件名称",{自定义组件结构})
vue.component("自定义组件名称",{自定义组件结构})
使用全局组件的几个步骤
-
定义组件 vue.component(
-
编写组件 template id=
-
调用组件 <"自定义组件名称"></"自定义组件名称"">
<div id='app'>
<!-- 2.使用组件 -->
<myheader></myheader>
<myheader></myheader>
</div>
-----------------------------
<div id='app2'>
<!-- 5.全局组件可以跨元素使用 -->
<myheader></myheader>
</div>
-----------------------------
<!-- 3.组件模板,使用id进行绑定 -->
<template id="test">
<div>
<header>头部标签</header>
<h1 @click=fn()>标题标签</h1>
</div>
</template>
<script>
//1.定义组件
Vue.component("myheader", {
//2.编写组件
template: "#test", //绑定模板值
data() { return {info: 'hello'} },
methods: {
fn() {console.log("ok");
}}})
new Vue({
el: '#app',
data: {
}})
new Vue({
el: '#app2',
data: {
}})
</script>
使用组件需要注意的点:
-
全局组件可以跨元素使用,但局部组件不行
-
建议使用小写,若使用大写则需要在大写字母前加上"-" 例: <my-Header></my-Header>
-
组件内也可以使用data与methods来为组件内的元素与方法进行绑定
-
模板绑定的是ID而不是组件名称
-
components与New Vue({ })是同级的
局部组件
语法:
components:{
组件名:{
配置}}
使用全局组件的几个步骤
-
定义组件 vue.component(
-
编写组件 template id=
-
调用组件 <"自定义组件名称"></"自定义组件名称"">
<div id='app'>
<!-- 3.调用组件 -->
<myheader></myheader>
</div>
<div id='app2'>
<myheader></myheader>
</div>
<!-- 2.定义模板内容 -->
<template id="myT">
<div>
<header>头部--{{msg}}</header>
<h1 @click="fn">标题标签</h1>
</div>
</template>
<script>
new Vue({
el:'#app',
data:{ },
//1.定义组件
components: {
myheader: {
template: '#myT',
data() { return { msg: 'hello'} },
methods: {
fn() {
console.log(this.msg);
}}}}})
new Vue({
el: '#app2',
data: { }})
</script>
使用组件需要注意的点:
-
因为局部组件存在作用域,不是绑定元素调用此组件即无法使用
-
模板中只能够有一个根节点
-
components与data和methods是同级的