首页 > 其他 > 详细

vue 组件间传值方式

时间:2019-06-22 23:22:41      阅读:121      评论:0      收藏:0      [点我收藏+]

 

/*

父组件给子组件传值

1.父组件调用子组件的时候 绑定动态属性
<v-header :title="title"></v-header>

2、在子组件里面通过 props接收父组件传过来的数据

 

 

*/

 


/*
父组件给子组件传值

1.父组件调用子组件的时候 绑定动态属性
<v-header :title="title"></v-header>

2、在子组件里面通过 props接收父组件传过来的数据
props:[‘title‘]

 

props:{

‘title‘:String
}

3.直接在子组件里面使用

 

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

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

<v-header ref="header"></v-header>

2.在父组件里面通过

this.$refs.header.属性

this.$refs.header.方法

 

 

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


this.$parent.数据

this.$parent.方法

 

*/

/*
子组件主动获取父组件的数据和方法:


this.$parent.数据

this.$parent.方法


*/
// alert(this.$parent.msg);

//this.$parent.run();

 

 

 

/*非父子组件传值
1、新建一个js文件 然后引入vue组件  实例化vue 最后暴露这个实例

import Vue from ‘vue‘;

var VueEvent = new Vue();

export default VueEvent;


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

import VueEvent from ‘../model/VueEvent.js‘;


3、通过 VueEmit.$emit(‘名称‘,‘数据‘)


4、在接收收数据的地方通过 $om接收广播的数据
VueEmit.$on(‘名称‘,function(){


})


*/

vue 组件间传值方式

原文:https://www.cnblogs.com/jasonLiu2018/p/11070735.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!