1.父组件向子组件传值
//父组件通过props向子组件传值
<template> <div id="parent">
<header :msg="{dady}"></header>
</div> </template>
import Header from ‘./header.vue‘
export default{
data(){
return{
dady: ‘这是来自爸爸的数据‘
}
},
components{
header: Header
}
}
//子组件通过props拿到父组件传过来的值
<template>
<div id="son">
{{msg}}
</div>
</template>
export default{
props: [‘msg‘]; //拿到父组件传过来的数据
data(){
return {
}
}
}
2.子组件向父组件传值
//子组件事件向父组件传值
<template>
<div id="son">
<button @click="send">点击向父组件传值</button>
</div>
</template>
export default{
data(){
return {
msg: ‘我是来自儿子的数据‘
}
},
methods:{
send(){
this.$emit(‘toparent‘,this.msg);
}
}
}
//父组件通过props向子组件传值 <template> <div id="parent"> <header @toparent="fromSon"></header> </div> </template> import Header from ‘./header.vue‘ export default{ data(){ return{ } }, components{ header: Header },
methds:{
fromsSon(data){
alert(data); //我是来自儿子的数据
}
} }
3.平行组件之间的传值vuexVuex是一个专为vuejs应用程序开发的状态管理模式
//安装 store.js npm install vuex --save import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex)
expoort const store = new Vuex.Store({
state:{ //1.用来存储数据
count: 1
},
getters:{ //2.可以认为是store的计算属性
decreae(state){
state = state + ‘我在getters中被改变了’
return state;
}
},
mutations:{
INCREMENT(state,payload){ // 3.vuex建议mutations用大写表示，更改Vuex的store中的状态的唯一方法就是提交mutation
state.count+=payload.amount;
}
},
actions:{
increment(context,payload)}{ //4.异步mutations
setTimeout(function(){
context.commit(‘increment‘,payload);
},1000)
}
}
})
app.vue
<template>
<div id="app">
{{count}}
{{decrease}}
<button @click="change">点击改变mutations</button>
</div>
</template>
export default{
data(){
return{
}
},
computed:{
count(){
return this.$store.state.count //获取store中state中的值
}，
decrease(){
return this.$store.getters.decrease; //获取getters中被改变后的state值
}
},
methods:{
change(){
this.$store.commit(‘increment‘,{amount:10}); //更改Vuex的store中的状态的唯一方法就是提交mutation,每个mutaion都有一个字符串的时间类型和一个回调函数,mutation都是同步事物
},
actionChange(){
this.$store.dispatch(‘increment‘,{amount:10});//action类似于mutation,不同在于action提交的是mutation,action可以包含任意异步操作
}
}
}