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.平行组件之间的传值

1）非父子组件之间通过bus来传值

　　假设a组件有一个按钮，点击按钮把数据传递给b组件

　　

//根组件main.js
new Vue({
  el: '#app',
  router,
  store: store,
  template: '<App/>',
  components: { App },
//将空的实例放到根组件下，所有子组件都可以用
  data:{
      Bus: new Vue()
  }
})

//a组件，点击a组件的按钮传值

<template>
　　<div id="a">
　　　　<p>我是底部，我想和头部进行通讯</p>
　　　　<button @click="submit">点击向顶部传递数据</button>
　　</div>
</template>

<script type="text/javascript">
　　export default{
　　methods:{
　　　　submit(){
　　　　　　　this.$root.Bus.$emit('eventName','123');
　　　　}
　　}
}
</script>

//b组件创建完成时就监听该事件

<template>
　　<div id="b">
　　　　{{msg}}
　　</div>
</template>

<script type="text/javascript">
　　export default{
　　methods:{

　　　　data(){

　　　　　　return{

　　　　　　　　msg: ''

　　　　　　}

　　　　},
　　　　created(){

　　　　　　　let that = this;
　　　　　　　this.$root.Bus.$on('eventName',function(val){

　　　　　　　　　　that.msg = val;

　　　　　　　});
　　　　},

　　　　beforeDestroy(){

　　　　　　this.$root.Bus.$off('eventName'); //在组件销毁时解除 事件绑定

　　　　}
　　}
}
</script>

 

2）Vuex是一个专为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可以包含任意异步操作
　　　　}
　　}
}