vue父組件給子組件傳值
- 父組件給導入的子組件綁定一個數(shù)據(jù):title是父組件的數(shù)據(jù)
<template>
<div id="home">
父組件
<v-header :title="title"></v-header>
</div>
</template>
<script>
import Header from './Header.vue';
export default{
data(){
return{
msg:"我是一個home組件",
title:"我是父組件的數(shù)據(jù)"
}
},components:{
'v-header':Header
}
}
</script>
<style lang="css" scoped>
</style>
2 子組件獲取數(shù)據(jù). props:['title'] 即可獲得子組件數(shù)據(jù)
<template>
<div id="header">
<h2>我是子組件-----{{title}}</h2>
</div>
</template>
<script>
export default{
data(){
return{
msg:"我是一個home組件"
}
},methods:{
},props:['title']
}
</script>
<style lang="css" scoped>
</style>
同樣蓬坡，在子組件中也可以調用父組件的方法锌妻；在父組件中創(chuàng)建一個方法廊谓，然后傳給子組件；
<template>
<div id="home">
父組件
<v-header :run="run"></v-header>
</div>
</template>
<script>
import Header from './Header.vue';
export default{
data(){
},components:{
'v-header':Header
},methods:{
run(){
alert("我是父組件的方法");
}
}
}
</script>
在子組件中獲取并且調用括蝠；
<template>
<div id="header">
<h2>我是子組件</h2>
<button @click="run()">子組件執(zhí)行父組件的run方法</button>
</div>
</template>
<script>
export default{
data(){
},props:['title','run']
}
</script>
vue父組件主動獲取子組件數(shù)據(jù)
將子組件看成父組件dom中的一部分胳搞，所以可以使用ref來獲取
在調用子組件時設置ref
<v-header ref="header"></v-header>
在父組件需要獲取子組件數(shù)據(jù)或方法的地方獲取
//獲取子組件數(shù)據(jù)
this.$refs.header.msg
//調用子組件方法
this.$refs.header.childRun();
vue子組件主動獲取父組件數(shù)據(jù)
this.$parent.父組件方法
this.$parent.父組件數(shù)據(jù)
非父子組件傳值
- 新建一個js文件，然后引入vue好乐，實例化vue，然后暴露這個實例
import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent;
- 在要廣播和需要接收數(shù)據(jù)的兩個地方引入剛才定義的實例
import VueEvent from '../model/VueEvent.js';
3.通過emit廣播數(shù)據(jù)
VueEvent.$emit('key' , data);
4.在接收數(shù)據(jù)的地方通過on接收數(shù)據(jù)
VueEvent.$on('key');
