vue父子组件互相传值 - 蓝蓝设计_UI设计公司

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


vue父子组件互相传值

2019-7-24 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

一、父组件给子组件传值

1、父组件调用子组件的时候,绑定动态属性

/*传值可以是值“title”、是方法“run”、是组件“this”*/
<v-header :title="title" :run="run" :home="this"></v-header>
1
2
2、在子组件里面通过props接受父组件传过来的数据

<script>
    export default{
props:['title','run','home']
}
</script>

二、父组件主动获取子组件的数据和方法

1、调用子组件的时候定义一个ref

<v-header ref="header"></v-header>
1
2、在父组件里面通过以下方式获取属性和方法

this.$refs.header.属性
this.$refs.header.方法

三、子组件主动获取父组件的数据和方法

this.$parent.数据
this.$parent.方法

四、非父子组建传值

1、新建一个js文件 然后引入vue 实例化vue最后暴露这个实例

VueEvent.js

import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent;

2、在要广播的地方引入刚才定义的实例,并进行广播

home.vue

<script>
import VueEvent from './VueEvent.js';
    export default{
        methods:{
            emitNews(){
                /*广播数据*/
                VueEvent.$emit('to-news',this.数据)
            }
        }
}
</script>

3、在要接收数据的地方接受广播

news.vue

<script>
import VueEvent from './VueEvent.js';
    export default{
        /*在生命周期函数里写,编译的时候就调用*/
        mounted(){
            /*接受广播*/
            VueEvent.$on('to-news',function(data){
                console.log(data);
            })
        }
}
</script>


标签: vue父子组件互相传值 « 用大数据告诉你什么样的图最受欢迎! | Bitmap三级缓存 和二次采样»


订阅Rss
掌上彩票注册 湖南快乐十分走势 秒速赛车官网 福建11选5开奖 秒速赛车官网 秒速赛车官网 广东11选5走势图 秒速赛车官网 秒速赛车官网 秒速赛车官网