vue关于组件传值
首先先了解组件的嵌套（全局嵌套、局部嵌套）因此传值有3种方式，分别是父-子，子-父
我们先来探讨一下父-子之间的传值：
抛出问题：子组件要获取父组件当中的数据；
我们先倒推：一个普通的组件要获取定义的数据我们看图说话
子组件获取自己本身的数据（name）直接是拿过来{{name}}用；
所以：现在的问题是怎么从不是本身数据拿，
1、在子组件标签自定义一个属性名name1取值为父组件传的值，即：name1='title',
2、在vue实例子组件内部有一个props取属性名然后在直接用{{name1}}就可以拿到父组件的值了
props：上图
2、子-父之间的传值：子组件数据传到父组件里
首先从两个组件的dom结构与vue中内部组件观察，得知，只有dom里边有父与子的关系，因此利用事件机制的原理，
// events EventEmitter - emit('事件',数据) on('事件',()＝>)
// Vue.prototype.$emit=EventEmitter.emit
在子组件标签内定义一个点击事件来发送给父组件数据，同时在父组件标签内的子组件也自定义一个接受数据的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<h2>传值</h2>
<v-parent></v-parent>
</div>
<template id="parent">
<div>
<h3>父组件</h3>
<p>接受子组件---{{str}}</p>
<v-child @click='get'></v-child>
</div>
</template>
<template id="child">
<div>
<hr>
<h2>子组件</h2>
<p>{{title}}</p>
<button @click='send()'>发送父组件数据</button>
</div>
</template>
<!-- 利用事件机制原理，dom里边有父与子的关系，因此应该在dom里边操作，达到传值的目的
1、// events EventEmitter - emit('事件',数据) on('事件',()＝>)
// Vue.prototype.$emit=EventEmitter.emit
-->
<script>
var app =new Vue({
el:'#app',
components:{
'v-parent':{
template:'#parent',
data(){
return{
str:''
}
},
methods:{
get(msg){//传过来的实参
console.log(msg);
this.str=msg;
}
},
components:{
'v-child':{
template:'#child',
data(){
return{
title:'我是被发送子组件'
}
},
methods:{
send(){
this.$emit('send',this.title)
}
}
}
}
}
}
})
</script>
</body>
</html>
平行传值：重点代码
兄弟组件之间就需要一个中间值，我在这里称为bus。在vue文件main.js中，我们利用 Vue.prototype.bus=new Vue() 来定义，此时我们就有了一个中间量。 利用$emit发送，$on接收 <button @click="send">点我给兄弟传值</button> methods: { send() { this.bus.$emit("toBrother", this.to); } } <div>我得到的兄弟组件信息是：{{get}}</div> export default { data() { return { get: "" }; } beforeCreate() { this.bus.$on("toBrother", msg => { this.get = msg; }); } };
vuex传值：
store.js：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态
state: {
headImg: JSON.parse(sessionStorage.getItem('headImg')) || ""
},
mutations: {
newImg(state, msg){
sessionStorage.setItem('headImg', JSON.stringify(msg))
state.headImg = msg;
}
}
})
export default store
//////////////////////////////////////////////////////////////////////////
main.js中引入vuex
import Vue from 'vue';
import Vuex from 'vuex';
import store from './vuex/store';
Vue.use(Vuex);
var v = new Vue({
el: '#app',
router,
store,
components: {index},
template: '<index/>',
created: function () {
}
})
传值：this.$store.commit("newImg", value);
取值：this.$store.state.headImg
