父组件向子组件传值
方法一：
子组件想要使用父组件的数据，需要通过子组件的 props 选项来获得父组件传过来的数据。
1.父组件parent.vue中代码：
<template>
<div class="app">
// message 定义在子组件的 props 中
<child :message="msg"></child>
</div>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
data() {
return {
msg: 'Hello world'
}
}
}
</script>
2.在子组件 child.vue 中的 props 选项中声明它期待获得的数据
<template>
<span>{{message}}</span>
</template>
<script>
export default {
// 在 props 中声明获取父组件的数据通过 message 传过来
props: ['message']
}
</script>
方法二 ：
使用$children可以在父组件中访问子组件。
用法：
this.$childen.xxx
方法三：
父组件直接获取子组件的数据（this.$refs.ref的名字.变量）
// 假设我们要获取子组件<son></son>的数据target
// 第一：子组件son要设置ref
<son ref="sonComponent"></son>
// 第二：用下面的语句去获取，修改子组件的值
console.log(this.$refs.sonComponent.target); // 取值
this.$refs.sonComponent.target = '1'; // 修改值
子组件向父组件传值
方法一：
1、给子组件child.vue绑定要发生改变的事件，通过 this.$emit 方法
<template>
<div class="form-group">
<div class="form-control">
<a data-v-c99171e2="" href="javascript:;" @click="refreshTotalCountData" class="btn btn-primary query-btn">查询</a>
</div>
</div>
</template>
<script>
export default {
data(){
},
methods: {
async refreshTotalCountData(){
var setData = "hello world!"
this.$emit('transferData', setData); //'transferData' 自定义函数；'setData' 传递的数据
},
}
}
</script>
2、父组件parent.vue接收子组件child.vue传过来的数据
<template>
<div id="parents">
<tool-bar @transferData="getDate"></tool-bar>
<div>{{msg}}</div> // 123 ;当点击子组件按钮时，父组件就会发生改变 ‘hello world！’
</div>
</template>
<script>
import child from './child.vue';
export default {
data(){
return{
msg:'123'
}
},
methods: {
getDate(setData) {
this.msg = setData;
},
}
}
</script>
方法二：
子组件直接用this.$parent.xxxx这样直接调用父组件的方法。
方法三：
也可以使用 v-model 方式来直接绑定父组件变量，把数据从子组件传回父组件。
父组件：
<template>
<div id="app">
<p id="show">总数：{{total}}</p>
<Child v-model="total"/>
</div>
</template> <script type="text/javascript">
import Child from "./components/Child";
export default {
components: {
Child
},
data() {
return {
total: 0
};
}
};
</script>
子组件：
<template>
<div class="child">
<button @click="click">+1</button>
</div>
</template> <script>
export default {
name: "Chlid",
data() {
return {
count: 0
};
},
methods: {
click: function() {
this.count++;
this.$emit("input", this.count);
}
}
};
</script>
非父子组件间数据传递
方法一：
创建一个空的 Vue 实例作为*事件总线，实现非父子组件之间的通信。
Vue内部有一个事件机制，可以参考源码。
$on方法用来监听一个事件。
$emit用来触发一个事件。
1.先定义一个新的bus.js文件，作为中间桥梁
import Vue from 'vue'; export var bus = new Vue();
2.在被传值页面（如：A.vue）进行引入bus.js文件，通过$emit触发
import Bus from './bus.js'
export default {
data() {
return {
message: ''"
}
},
methods: {
bus () {
Bus.$emit('msg', '传给兄弟组件们，你收到没')
}
}
}
3.在要和$emit通信的另外一个组件（如：B.vue）中添加监听msg事件
import Bus from './bus.js'
export default {
data() {
return {
message: ''
}
},
mounted() {
Bus.$on('msg', (e) => {
this.message = e;
console.log(`传来的数据是：${e}`);
})
}
}
这样我们就实现了非父子组件间的数据传递了
方法二：
如果项目较大，那么可以使用具有状态管理的 vuex
方法三：
可以使用element组件中的from标签进行数据传递。