vuejs学习总计——数据传值篇

//父组件通过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 {

　　　　}
　　}
}

//子组件事件向父组件传值
<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); //我是来自儿子的数据
　　　　}
　　}
}

//安装
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可以包含任意异步操作
　　　　}
　　}
}