vue传值

vue传值的几种方法

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

父子传值

• 父传子

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

• 子传父

4. 子组件通过点击事件触发$emit(“函数名”，参数1，参数2)
5. 父组件中引入的子组件需要自动监听由子组件"注册"的 '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的单纯值传递多了方法、属性、异步方法等功能。但是因为是将内容本地化，所以就会被在浏览器中获取到。