vue组件
Posted zhongzhipeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue组件相关的知识，希望对你有一定的参考价值。
说道组件不得不提的就是组件的嵌套了，所谓的组件嵌套其实就是包含关系。父组件内包含一个或多个子组件，每个子组件都有自己的模板，子组件与模板通过id相关联，子组件的数据只能在自己的模板中使用，在父组件下注册后就可以以标签的形式调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./../js/vue.js"></script> </head> <body> <div id="app"> {{msg}} <son> </son> </div> </body> </html> <template id="son"> <div> {{msg1}} <soner> </soner> </div> </template> <template id="soner"> <div> {{msg2}} </div> </template> <script> var Soner={ template:"#soner", data:function () { return{ msg2:"子组件的子组件" } } } var Son={ template:"#son", data:function () { return{ msg1:"子组件" } }, components:{ soner:Soner } } var app=new Vue({ el:"#app", data:{ msg:"根组件" }, components:{ son:Son } }) //vue组件：app是最大的组件（根组件），每个子组件都有一个自己的模板，他们通过id相关联，子组件的数据 //只能用在自己组件的模版内，要像调用子组件需要再父组件下用components:{xx:xx}注测，在父组件模板中以 // 标签的形式调用。 </script>
组件通信即组件之间互相调用数据，其中分别有父组件的数据给子组件、子组件的数据给父组件用、人为触发 自定义组件、动态组件等
父组件传给子组件：我们会用到props，首先在父组件调用的子组件标签中添加一个自定义属性
<sunzi :bb="msg1"> </sunzi>//msg1为父组件的数据值
然后在与之对应的组件中添加props
var Sunzi={
template:"#sunzi",
props:["bb"],
data:function () {
return{
msg2:"大孙子"
}
}
最后就是在mounted里更改数据值就可以了
var Sunzi={
template:"#sunzi",
props:["bb"],
data:function () {
return{
msg2:"大孙子"
}
},
mounted(){
this.msg2=this.$props.bb;
}
}
总结一下就是：父组件和子组件，之间靠子组件标签取得关联，在子组件标签上所有的属性构成的集合在子组件的props属性可以接受到。
下面是完整代码：<<<<<
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./../js/vue.js"></script> </head> <body> <div id="app"> <div>{{msg}}</div> <laoda> </laoda> </div> </body> </html> <template id="laoda"> <div> 儿子辈 {{msg1}} <sunzi :bb="msg1"> </sunzi> </div> </template> <template id="sunzi"> <div > 孙子辈 {{msg2}} </div> </template> <script> var Sunzi={ template:"#sunzi", props:["bb"], data:function () { return{ msg2:"大孙子" } }, mounted(){ console.log(this.$props); this.msg2=this.$props.bb; } } var Laoda={ template:"#laoda", data:function () { return{ msg1:"大儿子" } }, components:{ sunzi:Sunzi } } var app=new Vue({ el:"#app", data:{ msg:"葫芦爷爷" }, components:{ laoda:Laoda } }) console.log(app); </script>
>>>>>>
父组件获取子组件数据：需要的就是refs（组件模板下所有子组件构成的集合）
第一步还是在父组件的子组件标签添加ref属性
<sunzi ref="xiaoli"> </sunzi>
第二部在父组件下使用$this.refs
var Laoda={
template:"#laoda",
data:function () {
return{
msg1:"大儿子"
}
},
components:{
sunzi:Sunzi
},
mounted(){
console.log(this.$refs.xiaoli.msg2)//$refs是所有子组件标签的集合
this.msg1=this.$refs.xiaoli.msg2;//msg2为子组件的数据
}
}
下面是完整代码<<<<<
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./../js/vue.js"></script> </head> <body> <div id="app"> <div>{{msg}}</div> <laoda> </laoda> </div> </body> </html> <template id="laoda"> <div> 儿子辈 {{msg1}} <sunzi ref="xiaoli"> </sunzi> <sunzi ref="xiaoli"> </sunzi> </div> </template> <template id="sunzi"> <div > 孙子辈 {{msg2}} </div> </template> <script> var Sunzi={ template:"#sunzi", props:["bb"], data:function () { return{ msg2:"大孙子" } }, mounted(){ } } var Laoda={ template:"#laoda", data:function () { return{ msg1:"大儿子" } }, components:{ sunzi:Sunzi }, mounted(){ console.log(this.$refs.xiaoli.msg2)//$refs是所有子组件标签的集合 this.msg1=this.$refs.xiaoli.msg2; } } var app=new Vue({ el:"#app", data:{ msg:"葫芦爷爷" }, components:{ laoda:Laoda } }) console.log(app); </script>
>>>>>>
人为触发的自定义事件
在子组件模板下定义一个事件 用于自定义事件。创建方法是this.$emit
<template id="sunzi"> <div > 子组件 <button @click="fn">自定义</button> </div> </template>
<script>
var Sunzi={
template:"#sunzi",
props:["bb"],
data:function () {
return{
msg2:"小小"
}
},
methods:{
fn(){
this.$emit("aa","这是自定义的")//第一个参数是事件名，第二个参数是要传递的数据，可以是字符串也可以是data内的数据
}
}
}
然后再子组件标签下用v-on：或@去接收自定义事件
<template id="laoda"> <div> 父组件 {{msg1}} <sunzi @aa="ss"> </sunzi> </div> </template>
最后在父组件下写方法
var Laoda={
template:"#laoda",
data:function () {
return{
msg1:"大大"
}
},
components:{
sunzi:Sunzi
},
methods:{
ss(res){
this.msg1=res;
}
}
下面是完整代码<<<<<<
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./../js/vue.js"></script> </head> <body> <div id="app"> <div>{{msg}}</div> <laoda> </laoda> </div> </body> </html> <template id="laoda"> <div> 儿子辈 {{msg1}} <sunzi @aa="ss"> </sunzi> </div> </template> <template id="sunzi"> <div > 子组件 {{msg2}} <button @click="fn">自定义</button> </div> </template> <script> var Sunzi={ template:"#sunzi", props:["bb"], data:function () { return{ msg2:"大孙子" } }, methods:{ fn(){ this.$emit("aa","这是自定义的") } } } var Laoda={ template:"#laoda", data:function () { return{ msg1:"大儿子" } }, components:{ sunzi:Sunzi }, methods:{ ss(res){ this.msg1=res; } }, mounted(){ } } var app=new Vue({ el:"#app", data:{ msg:"葫芦爷爷" }, components:{ laoda:Laoda } }) console.log(app); </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./../js/vue.js"></script> </head> <body> <div id="app"> <div>{{msg}}</div> <laoda> </laoda> </div> </body> </html> <template id="laoda"> <div> 儿子辈 {{msg1}} <sunzi @aa="ss"> </sunzi> </div> </template> <template id="sunzi"> <div > 子组件 {{msg2}} <button @click="fn">自定义</button> </div> </template> <script> var Sunzi={ template:"#sunzi", props:["bb"], data:function () { return{ msg2:"大孙子" } }, methods:{ fn(){ this.$emit("aa","这是自定义的") } } } var Laoda={ template:"#laoda", data:function () { return{ msg1:"大儿子" } }, components:{ sunzi:Sunzi }, methods:{ ss(res){ this.msg1=res; } }, mounted(){ } } var app=new Vue({ el:"#app", data:{ msg:"葫芦爷爷" }, components:{ laoda:Laoda } }) console.log(app); </script>
>>>>>>
动态组件
要借助vue中的一个组件：
<component v-bind:is="ss"></component>
他有一个is属性用于动态切换，绑定的ss值
var Laoda={
template:"#laoda",
data:function () {
return{
msg1:"大大",
ss:"yule",
arr:["yule","xinwen","tiyu"]
}
},
methods:{
fn(i){
this.ss=this.arr[i];
}
},
components:{
yule:Yule,
xinwen:Xinwen,
tiyu:Tiyu
}
}
下面是完整代码<<<<<<<<<<
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./../js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<laoda> </laoda>
</div>
</body>
</html>
<template id="laoda">
<div>
儿子辈
{{msg1}}
<sunzi @aa="ss"> </sunzi>
</div>
</template>
<template id="sunzi">
<div >
子组件
{{msg2}}
<button @click="fn">自定义</button>
</div>
</template>
<script>
var Sunzi={
template:"#sunzi",
props:["bb"],
data:function () {
return{
msg2:"大孙子"
}
},
methods:{
fn(){
this.$emit("aa","这是自定义的")
}
}
}
var Laoda={
template:"#laoda",
data:function () {
return{
msg1:"大儿子"
}
},
components:{
sunzi:Sunzi
},
methods:{
ss(res){
this.msg1=res;
}
},
mounted(){
}
}
var app=new Vue({
el:"#app",
data:{
msg:"葫芦爷爷"
},
components:{
laoda:Laoda
}
})
console.log(app);
</script>
>>>>>>>>>>>>>>>
以上是关于vue组件的主要内容，如果未能解决你的问题，请参考以下文章