温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue.js 组件数据传递

发布时间:2020-05-30 04:49:41 来源:网络 阅读:453 作者:AESCR 栏目:web开发

一 父---> 子 组件通信
1,声明一个组件(props 指定组件外来接受的参数,我指定了一个string类型的message参数,默认内容为‘I Am AESCR’)

 Vue.component('test-com',{
        props:{
            message:{
                type:String,
                default:'I Am AESCR'
            }
        },
        template:'<div>{{message}}</div>'
    })

<div id="app">
    <test-com message='边学边记'></test-com>
</div>
        2,把需要传递的内容直接写在组件属性上面,通过v-bind:形式绑定,传递内容就变得容易修改了
<div id="app">
    <input type="text" v-model='msg' placeholder="请输入内容"/>
    <test-com v-bind:message='msg'></test-com>
</div>
<script>
    Vue.component('test-com',{
        props:{
            message:{
                type:String,
                default:'默认信息'
            }
        },
        template:'<div>{{message}}</div>'
    })
    new Vue({
        el:'#app',
        data:{
            msg:'I an AESCR'
        }
    })
</script>

二 子 --->父组件数据传递
1,通过触发事件的方式来传递数据,我们先说明一个组件,和一个事件

 Vue.component('test-com',{
        data:function(){
            return{
                msg:'I am AESCR'
            }
        },
       methods: {
            hello:function(){
                this.$emit('sayhello',this.msg)  #sayhello 为组件上监听的事件名称一致,后面为参数
            }
        },
        template:'<div><input type="button" v-on:click="hello()"  value="打招呼" /><input type="text" v-model="msg"/></div>'
    })
  调用组件
    <div id="app2">
        <p>外层 {{content}}</p>

        <test-com v-on:sayhello='sayhellocontent'></test-com> #sayhellocontent为外层事件名称
    </div>
          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(); //创建一个新实例
<div @click="ge"></div>
methods: {
    ge() {
        vm.$emit('blur','sichaoyun'); //触发事件 传递参数
    }
}
组件接受
created() {
  vm.$on('blur', (arg) => { 
        this.test= arg; // 接收
    });
}
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI