温馨提示×

温馨提示×

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

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

vue组件之间传值总结

发布时间:2020-07-30 08:01:15 来源:网络 阅读:946 作者:Garcia648 栏目:web开发
   <!--
        作者:wtt
        时间:2019-05-28
        描述:父组件给子组件传值:
        1.父组件调用子组件的时候动态绑定属性
        <v-home :title='homeTitle' :tableList='tableList' :run='run' :init='this'></v-home>
        2.子组件定义props接收动态绑定的属性
        props: ['title','tableList','run','init']
        3.子组件使用数据
    -->
    <!--
        作者:wtt
        时间:2019-05-28
        描述:子组件主动获取父子间的属性和方法:
        在子组件中使用this.$parent.属性/this.$parent.方法

    -->
            <!--
        作者:wtt
        时间:2019-05-28
        描述:子组件给父组件传值:
        1.父组件调用子组件时绑定属性ref
         <home-header :ref='header'></home-header>
        2.在父组件中使用this.$refs.header.属性/this.$refs.header.方法

   -->
        <!--
        作者:wtt
        时间:2019-05-28
        描述:非父子组件传值方法:
        1.创建VueEvent.js
        2.在创建的VueEvent.js里引入vue实例,实例化vue,暴露vue实例
        import Vue from 'vue';  var VueEvent=new Vue()    export default VueEvent;
        3.在要广播的组件引入定义的实例
        import VueEvent from '/project-vue/src/Model/VueEvent.js'
        4.通过VueEvent.$emit('名称',数据);
        VueEvent.$emit('to-header',this.message);
        5.在要接收的组件中VueEvent.$on('名称',function(data){});
        VueEvent.$on('to-header',function(data){
            console.log(data)
        });

    -->
向AI问一下细节

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

AI