Vue的组件
组件是什么?
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。
组件 就是 自定义的标签
组件的分类
全局组件:在所有vue实例中(.在它所挂载元素下面有效)有效
局部组件:在自己vue实例中(.在它所挂载元素下面有效)有效
全局组件
语法:
Vue.component(“自定义标签的名字”,{配置对象})
特点:
全局组件可以在任何被挂着的标签中使用.
全局组件的配置对象中必须包含template属性
注意事项:
template中的html必须在一个标签中. 仅且只能有一个根节点
应用场景:
如果该组件的特定功能需要在任何被挂着的标签中使用. 推荐使用全局组件
demoCode:
<body>
<h1>全局组件</h1>
<div id="myDiv">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<div id="myDiv1">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
</div>
<script>
//定义一个全局组件
Vue.component('mycomponet1',{
template:'<H1>测试...</h1>'
});
var compontConfig = {
template:'<h1>乔亮同学</h1>'
};
//定义第二个全局组件,并加入对象
Vue.component('mycomponet2',compontConfig);
new Vue({
el:"#myDiv",
data:{
msg:'xxx'
}
});
new Vue({
el:"#myDiv1",
data:{
msg:'xxx'
}
});
</script>
</body>
局部组件
语法:
var app = new Vue({
el: "#app",
data: {},
components : {
"局部组件的名字1" : {组件的配置对象}
"局部组件的名字2" : {组件的配置对象}
}
});
特点:
局部组件只能够在所挂载的标签中使用
demoCode
<body>
<h1>局部组件</h1>
<div id="myDiv">
<mycomponet1></mycomponet1>
</div>
<div id="myDiv1"><!--不能在不同的挂载中显示-->
<mycomponet1></mycomponet1>
</div>
</div>
<script>
//定义一个局部组件
var app = new Vue({
el: "#myDiv",
data: {
},
components : {
"mycomponet1" : {
template:'<H1>这是一个局部组件</H1>'
}
}
});
</script>
</body>
组件模板写法
写法一: 在script标签里面写
写法二: 在template标签里面写
注意: 这两种写法只能适用于局部组件
demoCode
<body>
<h1>组件模板写法</h1>
<div id="myDiv">
<mycomponet1></mycomponet1>
</div>
<div id="myDiv1">
<mycomponet1></mycomponet1>
</div>
<!--写法二:可以在template标签里面写-->
<!--<template id="mytemplate">
<h2>这是单独提出来的模板template</h2>
</template>
-->
<!--可以将模板单独提出来写
这两种写法只能用在局部组件
-->
<!--写法一:在<script>里面写-->
<script type="text/template" id="mytemplate">
<h2>这是单独提出来的模板template</h2>
</script>
<script>
//定义一个局部组件
new Vue({
el:"#myDiv",
components:{
"mycomponet1":{
template:"#mytemplate"
}
}
});
</script>
</body>
组件数据写法
语法:
"组件的名字":{
template: "",
data : function(){
return {
键1:值1,
键2:值2
}
}
}
注意事项:
data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码
只能够在各自的组件模板中使用各自的组件中的data数据
Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用.
components:{
"mycomponent1":{
// "template":"#templateStr1"
"template":"#templateStr2",
//模板是定义数据以下是可行的
//1 必须是函数
//2 通过return返回数据对象
//3 如果有多个数据就是对象对象多个属性及值
data(){
return {
messaage:"jjjj",
yhptest:"xxxxxxxxxxxxxx"
}
}
demoCode
<body>
<h1>组件数据写法</h1>
<div id="myDiv">
<mycomponet1></mycomponet1>
</div>
<div id="myDiv1">
<mycomponet1></mycomponet1>
</div>
<template id="myTemplate">
<form>
{{name1}}:<input type="text"/><br>
{{password}}:<input type="text"/>
</form>
</template>
<script>
//定义一个全局组件
Vue.component('mycomponet1',{
template:'#myTemplate',
data(){
return {"name1":"用户名","password":"密码"}
}
});
new Vue({
el:"#myDiv",
data:{
msg:'xxx'
}
});
new Vue({
el:"#myDiv1",
data:{
msg:'xxx'
}
});
</script>
</body>