Vue的传值方式

Vue组件之间的几种传值方式：

1.props（父给子传值）

2.$emit（子给父传值）

3.兄弟组件传值（全局事件总线、订阅发布、Vuex）

props传值：(父传子)

//App.vue父组件
<template>
	<div id="app">
        //使用v-bind：传输数据
	  <users v-bind:users="users"></users>
	</div>
</template>
	<script>
//引入子组件
	import Users from "./components/Users"
	export default {
	  name: 'App',
	  data(){
	    return{
//定义传送数据
	      users:["a","c","v"]
	    }
	  },
	  components:{
//将子组件注册
	    "users":Users
	  }
	}

//users子组件
<template>
	<div class="hello">
	 <ul>
	    <li v-for="user in users">{{user}}</li>//v-for遍历传递过来的值，渲染页面
	 </ul>
	</div>
</template>
<script>
    export default {
	    name: 'Users',
//第一种接收
props：[users:{}]

//第二种接收
	    props:{
	    users:{
    //传值的类型
	      type:Array,
	      required:true
	    }
	  }
	}
</script>

$emit：子组件向父组件传值（定义事件）

// 子组件
	<template>
	  <header>
	    <h1 @click="change">{{title}}</h1>//绑定点击事件
	  </header>
	</template>
	<script>
	export default {
	  name: 'app-header',
	  data() {
	    return {
	      title:"子传父"
	    }
	  },
	  methods:{
	    change() {
	      this.$emit("titleChanged","子向父组件传值");//自定义事件
	    }
	  }
	}

// 父组件
	<template>
	  <div id="app">
	 	//与子组件Change自定义事件保持一致
	    <app-header v-on:Change="update" ></app-header>
		// update($event)接受传递过来的文字
	    <h2>{{title}}</h2>
	  </div>
	</template>
	<script>
	import Header from "./components/Header"
	export default {
	  name: 'App',
	  data(){
	    return{
	      title:"传递的是一个值"
	    }
	  },
	  methods:{
	    updateTitle(e){   //声明这个函数
	      this.title = e;
	    }
	  },
	  components:{
	   "app-header":Header,
	  }
	}
	</script>

$emit传值步骤：

1. var Event=new Vue();

2. Event.$emit(事件名,数据);

3. Event.$on(事件名,data => {});

 $ref传值：父组件中写好this.$refs.子组件的ref名.子组件中的事件名（传进的值）

父组件定义

<template>
  <div class="about">
    <button @click="getNews">父组件-传值</button>
    <news ref="newsref"></news>
  </div>
</template>
<script>
//引入
import news from "../components/news";
export default {
  components: {
//注册
    news
  },
  methods: {
    getNews() {
      this.$refs.newsref.today("传值");
    }
  }
};
</script>

子组件定义

<template>
  <div>
    <button @click="today('今天')">子组件-传的值</button>
    <h2>新闻</h2>
  </div>
</template>
<script>
export default {
  methods: {
    today(val) {
      console.log("这是" + val + "传值");
    }
  }
};
</script>

 全局事件总线

首先：安装全局事件总线，main.js入口文件配置

new Vue({
  	......
  	beforeCreate() {
  		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
  	}
  }) 

定义传递的值

this.$bus.$emit('事件名'，传递的值)

接收传递的值：在mounted钩子获取，在beforeDestory中解绑

mounted()
{
//获取
this.$bus.$on('事件名',回调函数)
}
beforeDestory()
{
//解绑
this.$bus.$off('事件名')
}

订阅发布：：依赖第三方库

//端口控制台引入
npm  i pubsub-js

接收数据

mounted(){
            // 第一个参数是订阅的名称 msgName
            // 第二个参数是数据  data
   this.名字=pubsub.subscribe('订阅名',(msgName,data)=>{
                
                
           })
        },
   // 组件销毁前钩子，取消订阅
  beforeDestroy() {
   pubsub.unsubscribe(this.名字)
},

vuex：是集中管理数据的架构，包含module，getter，state，mutation，action。

***安装vuex，一般都是在与app.vue同级的store里的index.js进行配置

import Vue from 'vue'
import Vuex from 'vuex'

//Vuex挂载
Vue.use(Vuex)

//创建VueX对象
export default new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        name:'helloVueX'
    }
})

main.js中配置

import Vue from 'vue'
import App from './App'
//引入store
import store from './store'
//关机加载时的检测
Vue.config.productionTip = false

new Vue({
//el模板
  el: '#app',
  store,  //将创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

state：用来存储数据

getters：加工state成员给外界 

mutation：用来对state进行操作

Actions：也是用来对state进行成员操作不过是异步操作而且需要提交给mutation不能直接更改