vue.js组件数据传递-创新互联
一 父---> 子 组件通信
1,声明一个组件(props 指定组件外来接受的参数,我指定了一个string类型的message参数,默认内容为‘I Am AESCR’)
Vue.component('test-com',{
props:{
message:{
type:String,
default:'I Am AESCR'
}
},
template:'{{message}}'
})
2,把需要传递的内容直接写在组件属性上面,通过v-bind:形式绑定,传递内容就变得容易修改了
二 子 --->父组件数据传递
1,通过触发事件的方式来传递数据,我们先说明一个组件,和一个事件
Vue.component('test-com',{
data:function(){
return{
msg:'I am AESCR'
}
},
methods: {
hello:function(){
this.$emit('sayhello',this.msg) #sayhello 为组件上监听的事件名称一致,后面为参数
}
},
template:''
})
调用组件
外层 {{content}}
#sayhellocontent为外层事件名称
new Vue({
el:'#app2',
data:{
'content':null,
},
methods:{
sayhellocontent:function(content){
#content会接受到$emit传递的参数
this.content=content
}
}
})
三 组件间传递数据
1.新建一个js文件,然后引入vue 实例化vue 最后暴露这个实例
2.在要广播的地方引入刚才定义实例
3.通过vueEmit.$emit('名称',‘数据’)
4.在接收数据
---------------------------------------------------
Vue.$on('名称',function(){
})
我们可以实例化一个vue实例,相当于一个第三方
let vm = new Vue(); //创建一个新实例
methods: {
ge() {
vm.$emit('blur','sichaoyun'); //触发事件 传递参数
}
}
组件接受
created() {
vm.$on('blur', (arg) => {
this.test= arg; // 接收
});
}
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前标题:vue.js组件数据传递-创新互联
文章出自:http://myzitong.com/article/dsdcjd.html