全局组件的创建、注册、使用
-
创建
/* 组件创建格式 let 设置变量保存组件 = Vue.extend({ template: 模板 }); 1.指定组件的模板 2.模板只能有一个根元素 */ let myTemplate = Vue.extend({ template: `<div><p>我是组件</p></div>`, }); -
注册
/* 注册组件格式： Vue.component("组件使用时的名称", 组件变量); */ Vue.component("abc", myTemplate); -
使用
<!--注册组件相当于自定义一个标签，而使用组件就是使用标签--> <div id="app"> <abc></abc> </div>new Vue({ el: '#app' })
组件的创建、注册流程合并优化
-
优化一：在组件注册的时候直接传递组件的创建代码
Vue.component("abc", { template: `<div><p>我是组件</p></div>`, }); -
优化二：template属性可以使用外部模板
<!--自定义模板 1.通过这种方法自定义模板有语法提示--> <script type="text/html" id="info"> <div> <p>我是组件</p> </div> </script>Vue.component("abc", { // 传递模板ID template: "#info", }); -
优化三：使用Vue提供的模板标签，自定义模板
<template id="info"> <div> <p>我是组件</p> </div> </template>Vue.component("abc", { // 传递模板ID template: "#info", });
优化情况下全局与局部组件的注册和使用
<template id="info">
<div>
<p>我是组件</p>
</div>
</template>
-
全局组件
<div id="app"> <abc></abc> </div>Vue.component("abc", { template: "#info", }); new Vue({ el: '#app', }) -
局部组件
<div id="app1"> <abc></abc> </div> <div id="app2"> <abc></abc> </div>/* 局部组件注册通过在Vue实例的components属性上注册 格式： components: { "组件标签名称": { template: "模板ID", } } */ new Vue({ el: '#app1', components: { "abc": { template: "#info", } } }) new Vue({ el: '#app2', })
自定义组件中data和methods
<div id="app">
<abc></abc>
</div>
<template id="info">
<div>
<p @click="abcFn">{{ str }}</p>
</div>
</template>
-
全局组件
/* 注意点 1.自定义的组件的data是一个函数，函数内部通过return返回对象，在对象内部书写数据 */ Vue.component("abc", { template: "#info", data: function () { return { str: "我是组件11" } }, methods: { abcFn() { alert("abc") } } }); new Vue({ el: '#app' }) -
局部组件
new Vue({ el: '#app', components: { "abc": { template: "#info", data: function () { return { str: "我是组件11" } }, methods: { abcFn() { alert("abc") } } } } })
自定义组件中data为什么是通过函数返回对象？
-
避免在创建多个组件得时候，多个组件使用同一个份数据
<!--点击按钮时，只有对应得组件参数进行变化--> <div id="app"> <abc></abc> <abc></abc> <abc></abc> </div><template id="info"> <div> <button @click="add">加加</button> <p>{{ number }}</p> </div> </template>Vue.component("abc", { // 传递模板ID template: "#info", data: function () { return { number: 1, } }, methods: { add() { this.number++; } } }); new Vue({ el: '#app' })
组件得切换显示
<style>
*{
margin: 0;
padding: 0;
}
.v-enter{
opacity: 0;
margin-left: 500px;
}
.v-enter-to{
opacity: 1;
}
.v-enter-active{
transition: all 3s;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
.v-leave-active{
transition: all 3s;
margin-left: 500px;
}
</style>
<template id="home">
<div>
<p :style="obj">我是首页</p>
</div>
</template>
<template id="other">
<div>
<p :style="obj">我是其它页面</p>
</div>
</template>
Vue.component("home", {
template: "#home",
data: function () {
return {
obj: {
"width": "200px",
"height": "200px",
"background": "red"
}
}
}
});
Vue.component("other", {
template: "#other",
data: function () {
return {
obj: {
"width": "200px",
"height": "200px",
"background": "blue"
}
}
}
});
-
组件用元素标签显示，那么也可以使用指令进行显示与隐藏，使用v-if相关指令
new Vue({ el: '#app', data: { isShow: true }, methods: { change () { this.isShow = !this.isShow } } })<div id="app"> <button @click="change">切换</button> <home v-if="isShow"></home> <other v-else></other> </div> -
使用Vue提供得component标签
new Vue({ el: '#app', data: { name: 'home' }, methods: { change() { this.name = this.name === "home" ? 'other' : 'home' } } })<div id="app"> <button @click="change">切换</button> <!--<component v-bind:is="需要显示的组件名称"></component>--> <component v-bind:is="name"></component> </div> -
组件切换的组件缓存：使用keep-alive标签对包裹component标签对（组件）
new Vue({ el: '#app', data: { name: 'home' }, methods: { change() { this.name = this.name === "home" ? 'other' : 'home' } } })<div id="app"> <button @click="change">切换</button> <keep-alive> <component v-bind:is="name"></component> </keep-alive> </div> -
组件切换动画问题
<!-- 1.默认情况下，动画过渡的进入和离开是同时执行的 2.但是可以对transition标签 设置过度模式mode--> <div id="app"> <button @click="change">切换</button> <!--<component v-bind:is="需要显示的组件名称"></component>--> <transition mode="out-in"> <component v-bind:is="name"></component> </transition> </div>new Vue({ el: '#app', data: { name: 'home' }, methods: { change() { this.name = this.name === "home" ? 'other' : 'home' } } })
组件注册时的名称和组件使用时的名字注意点
-
在组件注册时如果使用了驼峰命名，那么在使用组件的时候只能用分隔命名使用
<div id="app"> <!--那么使用组件的时候只能只用分割命名--> <my-father></my-father> </div><template id="father"> <div> <p>我是父组件</p> </div> </template>// 这里使用驼峰命名注册组件名称 Vue.component("myFather", { template: "#father", }); new Vue({ el: '#app', })
