vue 組件間傳值

一、父組件給子組件傳值

父組件：

<template>
   <child :name="name"></child>
</template>
<script>
import child from "./child.vue"
  export default {
     components: {child},
     data(){
      return {name:"二哈"}
     }
  }
</script>

子組件：

<template>
  <div>{{name}}</div>
</template>
<script>
  export default {
    props:["name"]
  }
</script>

二、子組件給父組件

父組件：

<template>
  <child @childToParent="reviceSondata"></child>
</template>
<script>
import child from "./child.vue"
  export default {
    components: {child},
    methods:{
      reviceSondata(data){
        console.log(data);
      }
    }
  }
</script>

子組件：

<template>
   <button @click="dataTofather">點擊</button>
</template>
<script>
  export default {
    data () {
      return {
        message: '啦啦啦啦'
      }
    },
    methods:{
      dataTofather(){
        this.$emit("childToParent",this.message,true);
      }
    }
  }
</script>

三、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

github地址：vue傳值