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的单纯值传递多了方法、属性、异步方法等功能。但是因为是将内容本地化,所以就会被在浏览器中获取到。