2019-7-23 seo达人
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一、父组件给子组件传值
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>