脚本宝典收集整理的这篇文章主要介绍了vue 组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
组件的注册
<body>
<div id='a1'>
<bcdt></bcdt>
</div>
<div id='a2'>
<bcdt></bcdt>
</div>
<script type="text/x-template" id="s1">
<div>{{mas2}}<input type="button" value="弹出" @click="huan1"/></div>
</script>
<script>
Vue.component('bcdt',{
template:'<div>{{mas2}}<input type="button" value="弹出" @click="huan1"/></div>',
data:function(){
return { mas2:'cna1cbaocoa'}
},
methods:{
huan1:function(){
alert(2)
}
}
}
)
var vm= new Vue({
el:"#a1",
})
var zujian ={
template:'#s1',
data:function(){
return { mas2:'cna1cbaocoa'}
},
methods:{
huan1:function(){
alert(1)
}
}
}
var vm2= new Vue({
el:"#a2",
components:{
'bcdt':zujian,
}
})
</script>
其中<script type="text/x-template"><script>是引用模板
data在component必须应用函数
格式为data：function(){
return {};}
http://git.oschina.net/hxj886...
http://git.oschina.net/hxj886...
http://git.oschina.net/hxj886...
*slot命名引用
作用域插槽
<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>以上是脚本宝典为你收集整理的vue 组件全部内容，希望文章能够帮你解决vue 组件所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。