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>