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可以包含任意異步操作
　　　　}
　　}
}

vuejs學習總計——數據傳值篇