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

Posted wangpeiyuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuejs学习总计——数据传值篇相关的知识,希望对你有一定的参考价值。

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学习总计——数据传值篇的主要内容,如果未能解决你的问题,请参考以下文章

将 socket.io 数据传递给 vuejs

如何将片段中的 ListView 对象的数据传递给 Activity?

lua学习之类型与值篇

Vue:将数据传递给动态组件

如何将变量数据传递给 createFragementContainer

vue js将数据传递给组件