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://bzwzjz.com/article/dsdcjd.html