最全最详细的 component组件 详解
全局组件使用 Vue.component('组件名',{template:`<div>模板</div>`,data(){return:{name:"张三'}},methods:{}})使用<组件名></组件名>局部组件使用 Vue.component('组件名',{template:`<div>模板</div>`,data()
·
全局组件
使用 Vue.component('组件名',{
template:`<div>模板</div>`,
data(){
return:{
name:"张三'
}
},
methods:{
}
})
使用 <组件名></组件名>
局部组件
使用 Vue.component('组件名',{
template:`<div>模板</div>`,
data(){
return:{
name:"张三'
}
},
methods:{
},
components:{
'aChild':{
template:`<div>子组件只能在父组件的根节点内使用</div>`,
data(){
return:{
sex:"男'
}
}
}
}
})
组件通信
子传父
通过事件向上传递
在子组件标签上使用 @自定义事件名=‘父组件里面的方法名’
例如 <zi @myevent=‘getChild’>
子组件内容通过事件触发
使用 this.$emit(‘自定义事件名’,‘值’)传递数据
案例
<div id="box">
<zi @myevent='getchild'></zi>
</div>
<script>
Vue.component('zi',{
template:`
<div>
子组件
<button @click='setf'>点我</button>
</div>
`,
data(){
return{
ziname:'子组件内容'
}
},
methods:{
setf(){
console.log(1)
this.$emit('myevent',this.ziname)
}
}
})
new Vue({
el:'#box',
data:{
heihei:"父组件内容"
},
methods:{
getchild:function(e){
console.log(e)
}
}
})
父传子
通过属性向下传
这是子组件 <navbar myname='home' :myshow='false'></navbar>
自定义了一个属性 myshow
子组件内部使用 props:{ myshow:Boolean} 可以约束类型
内容可以直接{{myshow}}使用父元素传递过来的值
通过属性向下传 xxoo是子组件 abc自定义的属性 age是父组件里面的属性
子组件 使用 props这个属性去接收 props:['abc','bb'] props:{'abc':String}
父传子使用属性向下传 如果你的属性值是变量或者是数组使用 :属性 这种动态绑定,不加:会变成字符串
案例
var aa1=`
<div>
<h1>我是aa组件
<bb :oo='[1,2,3]'></bb>
<bb oo='name' @kkk="uuu"></bb>
</h1>
</div>
`
var bb1=`
<div>
<h1>我是bb组件{{oo}}</h1>
<div v-for='i in oo'>{{i}}</div>
<button @click='abc'>向上传</button>
</div>
`
Vue.component('aa',{
template:aa1,
data(){
return {
name:'隔壁老王'
}
},
methods:{
uuu(a){
console.log(a)
}
}
})
Vue.component('bb',{
template:bb1,
props:['oo'],
methods:{
abc(){
this.$emit('kkk',this.age)
}
},
data(){
return {
age:18
}
}
})
var VM = new Vue({
el:"#box",
})
ref
<input type="text" ref='in1'>
<!-- 1直接放在标签中获取元素节点 -->
<navbar ref='nchild'></navbar>
<!-- 2放在组件中获取组件对象 -->
案例
<div id="box">
<input type="text" ref='in1'>
<!-- 1直接放在标签中获取元素节点 -->
<navbar ref='nchild'></navbar>
<!-- 2放在组件中获取组件对象 -->
<button @click='getref'>获取ref数据</button>
</div>
<script>
Vue.component('navbar',{
template:`
<div>
我是子组件
</div>
`,
data(){
return{
myname:'子组件状态'
}
}
})
VM= new Vue({
el:'#box',
data:{
},
methods:{
getref(){
// console.log(this.$refs.in1.value)
console.log(this.$refs.nchild.myname)
}
}
})
</script>
动态组件
<component :is="na"></component>
is的值是组件名
<keep-alive>
<component :is="na"></component>
</keep-alive>
keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一般情况下,组件进行切换的时候,默认会进行销毁,如果有需求,某个组件切换后不进行销毁,而是保存之前的状态,那么就可以利用keep-alive来实现
案例
div id="box">
<keep-alive>
<component :is="na"></component>
</keep-alive>
<footer>
<ul>
<li @click="na = 'home'">首页</li>
<li @click="na = 'list'">列表页</li>
<li @click="na = 'goods'">商品也</li>
</ul>
</footer>
</div>
<script>
new Vue({
el:'#box',
data:{
na:'home'
},
components:{
home:{
template:`
<div>home首页<input type='text'/></div>
`
},
list:{
template:`
<div>list列表</div>
`
},
goods:{
template:`
<div>goods商品</div>
`
},
}
})
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)