vue传值的几种方法
在vue开发过程中，组件是必不可少的。由于页面通常有多个组件组成，所以需要一些组件之间传值方法，本文将从以下几个常用的传值方式来给出一定的传值示例
父子传值

父传子


父组件引入子组件
父组件通过v-bind动态赋值
子组件通过props 接收父组件传过来的值


子传父


子组件通过点击事件触发$emit(“函数名”，参数1，参数2)
父组件中引入的子组件需要自动监听由子组件"注册"的 'sonChange’事件,然后调用receive方法来更改数据

<!-- 父组件->
 <son :propdata = prop @sonChange="receive" ></son>
import son from '../components/son.vue'
data:function(){
	return {
		prop:"父传子"
	}
}
methods:{
	receive:function(flag,num){
		//接收子组件传来的两个值
		console.log(flag,num)
	}
}
<!-- 子组件->
<div>{{counter}}</div>
<botton @click=Change>点击跟改</botton>
 props:["prop"]
 data:function(){
	counter: this.prop
}
methods:{
	Change:function(){
		let flag = true
		let num = 1
		//传多个值给父组件
		this.$emit("sonChange",flag,num)
	}
}

将一个对象所有的属性都传过去 ，可以使用不加参数的v-bind
post: {
  id: 1,
  title: 'My Journey with Vue'
}
v-bind="post"

注意：props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件修改父组件的状态。所以不应该在子组件中修改 props 中的值，Vue 警告。
ref和$refs的传值

ref


ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。


$refs


$refs 是一个对象，持有已注册过 ref 的所有的子组件

1、ref 加在普通的元素上，用this.$ref.name获取到的是dom元素
2、ref 加在子组件上，用this.$ref.name获取到的是组件实例，可以使用组件的所有方法。
代码演示
<!--父组件-->
 <son  ref="monitorFactor" @popChange="popChange"  ></son>
 //点击触发add函数
  add:function (){
	 this.$nextTick(()=>{
	//通过使用$refs可以获取子组件的init 函数 将team 与true传给子组件
         this.$refs.monitorFactor.init(team,true)
     })
},
ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期mounted(){}钩子中调用，或者在 this.$nextTick(()=>{})中调用。

<!--子组件-->
 init(team,flag){
 		//接收到值
      console.log("flag:",flag)
    }, 
  

兄弟传值

非父子传参，需要有共同的父组件。需要定义公共的公共实例文件，作为中间仓库。不然达不到传值效果。

//main.js
var bus = new Vue();
Vue.prototype.bus = bus;

//兄弟组件
bus.$emit('val',flag) //传值
bus.$on('val',(flag)=>{ console.log(data)})  //接收值

vuex传值
1 src新建一个vuex文件夹

2 vuex文件夹里新建一个store.js

3 安装vuex cnpm install vuex --save

4 在刚才创建的store.js 中引入vue、vuex 引入vuex 并且use
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

5 定义数据 state在vuex中用于存储数据
var state = {  count:1,}

6 定义方法 mutations里边放的是方法,方法主要用于改变state里边的数据
var mutations = {
    incCount(){
            ++state.count;
   }
}
 //类似于计算属性  state里边的数据改变时候触发的方法。 可以做一些操作 并且可以有返回值
var getterfl={
         completedCountChange(state){
         return state.count * 2 +'位';
        }
    }

Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作
var actionfl = {
  asynIncCount(context){  
//因此你可以调用context.commit来提交一个mutation  使用action需要用dispatch
      context.commit('incCount');
  }
}

7 实例化 vuex
const store = new Vuex.Store({
            state,//state: state  简写
            mutations: mutations,//属性的简写是 mutations
    getters:getterfl,
       actions:actionfl,
})

8 对外暴露
export default  store;

9 在需要用的地方引入
import store from '../vuex/store.js'

10 注册store ，放在methods,data同级
export default {
    data(){
        return{}
    },
    store:store,
    methods:{
        incCount(){
            this.$store.commit('incCount');
        }
    }
}

11 使用vuex
使用数据： this.\$store.state.count
调用方法： this.$store.commit('incCount');

12.适用场景

父子组件、兄弟组件、无关系组件任意组件之间的传值
Vuex本质上也是一种本地存储，比localStorage的单纯值传递多了方法、属性、异步方法等功能。但是因为是将内容本地化，所以就会被在浏览器中获取到。

vue组件的作用域之间是相互独立的，一个组件不能使用另外一个组件的数据，所以为了

实现一个组件可以使用另外一个组件的数据，我们需要用到传值

vue 的组件传值分三类：1.父传子  2.子传父   3.非父子

其传值步骤如下：

第一种父：传子：

1.根组件即父组件，将要传递的值或者数据作为属性放置在要接收值的开始标签中—

属性名自定义，属性值为传递的data变量

2.在子组件中（要接收数据的那个子组件）通过props属性接收传递过来的数据str(子组

件开始标签中自定义的属性名)

3.在组件模板中直接调用，当前的元素（str）即可-----但是：一旦福组件的数据发生变化，子组件接收

的数据也会发生改变-----所以还需要有第四步，建立单项数据流，即，使父组件传递到自福建的数据，不在受父组件的影响

4.在子组件的data中重新声明一个变量（为null或者’’）,接收props中传递的数据，该变量的数据，在后期使用时直接调用即可
	第二种：子传父：
		1.在子组件的某个的方法中，通过调用$emit发射一个 自定义事件，即$emit（eventname,data）
		2.在父组件调用子组件的位置（即，子组件的开始标签）上，通过v-on监听子组件的发射过来的事件
		即@eventname=function(父组件生命的function)接收传递过来的数据
		3.在父组件中声明一个变量，接收传递过来的数据


	第三种：	非父子传值
		1.在要传值的组件A的某个方法中，通过创建空的vue实例bus擦混噶几安一个自定义事件
		即bus.$emit(eventname,并传递数据)----要传递的数据储存在bus实例中
		2.在要接收数据的组件B中的mounted声明周期函数中，通过bus.$on来监听发射的自定义事件
		，并在回调函数中，接收传递的数据bus.$on(eventname,callback)
		3.将接收的数据储存在data变量中
	注意：非父子传值的本质就是：将要传递的数据，储存在空的vue实例bus中，然后利用bus进行数据的传输

1.html部分
<div id="test">
	<my-component :testData="testData"></my-component>
</div>

2.自定义组件
Vue.component('my-component',{
	templata:`<div>{{testData}}+二蛋</div>`,
	propos:['testData'],
});

3.new一个Vue
myVue=new Vue({
	el:'#test',
	data:{
		testData:'你好'
	},
})

Vue传值大总结
前言
一直想成为一个全栈人员，学习前端也是必备技能之一，Vue作为现在比较流行的框架，我也想学习一下，今天把Vue那些转的头晕的传值方法总结一下，以备以后查看
使用props传值
props可以用于父组件传值到子组件
//父组件
<child-label title='aaaa'></child-label>
// 子组件
export default {
	props:[title,]
  }

此时这个title从父组件传到了子组件
使用$emit
// 子组件
methods:{
       sendMsg(){
           this.$emit('childData', 'child to parent')
       }
   }
// 使用父组件
<hello-vue @childData="getMsg"></hello-vue>

methods:{
    getMsg(val){
      this.childMsg = val
    }
}

使用公共js进行传值
// 公共js
import Vue from 'vue'
export default new Vue


// 父组件
import bus from bus //引入公共的js
methods:{
	sendMsg(){
		bus.$emit('aaa', 'bbb')
	}
}

// 子组件
import bus from bus
bus.$on('aaa')

通过$children和$parent
一个人可以有多个孩子，但是一个孩子只能有一个父亲$children是一个列表存储的数据通过索引获取即可
通过$attrs获取
如果和props一样传值，但是props已经使用的值，$attrs无法获取
$listensers
通过$listensers监控$emit数据的改变
this.$emit('childData', 'child to parent')
console.log('listensers', this.$listeners.childData)