组件
1、什么是组件
组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。
对于自定义标签名，Vue.js 不强制要求遵循 W3C 规则 (小写，并且包含一个短杠)，尽管遵循这个规则比较好。
myComponent驼峰式命名不能用
切记
组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例之前注册了组件
2、全局及局部组件
2.1、全局组件
全局组件就是多少个vue根实例都能用
【案例】
<div id="app">
{{msg}}
<my-component></my-component>
</div>
<div id="app1">
{{msg}}
<my-component></my-component>
</div>
<script>
//创建全局组件(注册)
//组件里面的data是个函数
Vue.component("my-component",{
template:'<div>{{msg1}}<input type="button" value="弹出" v-on:click="tanchu"/></div>',
data:function(){
return {
msg1:"组件创建"
}
},
methods:{
tanchu:function(){
alert(this.msg1)
}
}
})
//初始化根实例
var app = new Vue({
el:"#app",
data:{
msg:"组件",
}
});
//初始化根实例
var app1 = new Vue({
el:"#app1",
data:{
msg:"组件",
}
});
</script>
结果为下图
2.2、局部组件
不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用
【案例】
<div id="app">
{{msg}}
<my-component></my-component>
</div>
<script>
//创建局部组件(注册)
//组件里面的data是个函数
var zujian = {
template:'<div>{{msg1}}<input type="button" value="弹出" v-on:click="tanchu"/></div>',
data:function(){
return {
msg1:"组件创建"
}
},
methods:{
tanchu:function(){
alert(this.msg1)
}
}
}
//初始化根实例
var app = new Vue({
el:"#app",
data:{
msg:"组件",
},
//挂在组件
components:{
'my-component':zujian
}
});
</script>
结果为下图
3、组件配置
在这个配置找那个我们可以使用字符串模板
<script type="text/x-template"></script>
【案例】
<div id="app">
{{msg}}
<table>
<tr is="my-component"></tr>
</table>
</div>
<script type="text/x-template" id="tpl">
<tr>
<td>{{msg1}}</td><td>2</td><td>3</td><td>4</td>
</tr>
</script>
<script>
//创建局部组件(注册)
//组件里面的data是个函数
var teTPl = {
template:"#tpl",
data:function(){
return {
msg1:"data在组件中是个函数"
}
}
}
//初始化根实例
var app = new Vue({
el:"#app",
data:{
msg:"组件",
},
//挂在组件
components:{
'my-component':teTPl
}
});
</script>
结果为下图
4、动态创建组件
通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换
运行效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动态组件</title>
<script type="text/javascript" src="js/vue.js"></script>
<style>
.sf{
width: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li @click="qiehuan='dttpl'">首页</li>
<li @click="qiehuan='dt1tpl'">关于</li>
</ul>
<keep-alive>
<conmponent :is="qiehuan"></conmponent>
</keep-alive>
</div>
<script type="text/x-template" id="dtTpl">
<div class="sf">
<div class="sf-header">动态</div>
<div class="sf-body">
创建
</div>
<div class="sf-bottom">组件</div>
</div>
</script>
<script>
var dt = {
template:"#dtTpl",
}
var dt1 = {
template:"<a>关于我们<input type = 'text'/></a>"
}
var app = new Vue({
el:"#app",
data:{
qiehuan:"dttpl"
},
components:{
'dttpl':dt,
'dt1tpl':dt1
}
})
</script>
</body>
</html>
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。