父组件向子组件传值

父组件代码：

<template>
<div class="father">
<!-- 引入子组件 -->
<Child :extendsFather="messgae"></Child>
</div>
</template>
<script>
//导入子组件文件位置
import Child from '/child'
export default{
//添加子组件
components: {
Child
},
data(){
return{
message: '我是父亲'
}
}
}
</script>

子组件代码：

<template>
<div class="son">
<span @click="change">子组件--{{ extendsFather}}</span>
</div>
</template>
<script>
export default{
props: {
//将父组件传递的extendsFather在props中定义一下，子组件才可以使用
//子组件中的props中的数据都是通过父组件传递过来的，只可以读，不可以重新赋值
extendsFather: {
type: String
}
},
methods: {
change(){
this.extendsFather = '我是儿子';
//利用绑定事件机制@click更改extendsFather的值
}
}
}
</script>

父组件向子组件传递方法，子组件向父组件传值

父组件：

<template>
<!--父组件使用v-on绑定事件机制,自定义一个时间属性向子组件传递方法-->
<!--引入子组件-->
<Child v-on:father="fatherValue"><Child>
</template>
<script>
import Child from './child'
export default{
components: {
Child
},
data(){
return{
name: ''
}
},
methods: {
fatherValue(data){
var _that = this;
_that.name = data;
}
}
}
</script>

子组件：

<template>
<button @click="childValue">子组件向父组件传值</button><
276de
/span>
</template>
<script>
export default{
data(){
return {
name: '我是儿子'
}
},
methods: {
childValue(){
var _that = this;
//点击子组件的childValue方法，拿到父组件传递来的father方法，并向父组件传值
//emit意思是触发、调用、发射的意思
//使用$emit调用父组件的father方法，并将子组件data中的name值传入父组件中
_that.$emit('father', _that.name);
}
}
}
</script>

父组件调用子组件的方法

父组件调用子组件的方法同过this.$ref.refName来调用子组件中的方法

子组件：

<template>
<span></span>
</template>
<script>
export default{
methods: {
//在子组件中定义一个childClick方法
childClick(data){
alert(data)
}
}
}
</script>

父组件：

<template>
//绑定一个fatherClick方法，点击调用的时候，可以弹出
<button @click="fatherClick">调用</button>
<!--引入子组件-->
<Child ref="fatherValue"></Child>
</template>
<script>
import Child from './child'
export default{
components: {
Child
},
data(){
return{
//父组件data中的数据
message: '父组件调用子组件的方法'
}
},
methods: {
fatherClick(){
var _that = this;
//利用_that.$refs.refName调用子组件的childClick方法，并将data数据传递过去
_that.$refs.fatherValue.childClick(_that.message);
}
}
}
</script>

非父子组件传值方法

非父子组件传值需要借助一个中间vue实例的js和一个可以调用两者的父组件

bus.js

import Vue from 'vue'
export default new Vue()

子组件1

<template>
<button @click="childAclick">传值</button>
</template>
<script>
import Bus from './bus.js'
export default{
data(){
return{
childAValue:'我是大儿子'
}
},
methods: {
childAclick(){
var _that = this;
//在子组件1中使用emit发射一个自定义的transmit事件，将data中childAValue值传递到子组件2中
//Car相当于一个中间仓库，用来储存要传输的数据，再将数据传输出去
Bus.$emit('transmit', _that.childAValue);
}
}
}
</script>

子组件2

<template>
<span>{{ childBValue}}</span>
</template>
<script>
import Car from './car.js'
export default{
data(){
return{
childBValue:'我是小儿子'
}
},
mounted(){
var _that = this;
//$on是用来接收子组件1传输来的数据的
Bus.$on('transmit',(data) => {
_that.childBValue = data;
});
}
}
</script>

父组件

<template>
<div>
<ChildA/>
<ChildB/>
</div>
</template>
<script>
import ChildA from './childA'
import ChildB from './childB'
export default{
components:{
ChildA,
ChildB
}
}
</script>

添加父组件的原因是：子组件1和子组件2两者没有关系，要实现两者之间传值，需要有子组件1跳转到子组件2，这样就会使子组件2重新刷新页面，导致无法传值，利用父组件，将两个子组件同事显示在一个页面，这样就可以使两个非父组件之间进行传值了。