vue之传值

vue中传值的类型

- 父组件向子组件传值（属性传值）
- 子组件向父组件传值（事件传值）

属性传值过程

假设有这样一个数据在许多的组件中都被使用，那么我们可以把这个数据放到根组件中，以属性传值的方式传递给子组件。
首先在App.vue组件中定义一个公共的数据(实际项目中这个数据是异步获取的)publicData，我们可以分析，传值的过
程就是把数据抛出的过程和接受的过程，这里是父组件向子组件传值，也就是说父组件执行的抛出数据的过程，而子组件执
行的是接受数据的过程。
仔细分析下面的代码，可以看出子组件Users.vue 和父组件App.vue两个组件之间唯一有联系的就是  <users></users>

				// 组件的html结构层
				<template>
					  <div id="app">
						    <h1>{{name}}</h1>
						    <users v-bind:public="publicData"></users>
					  </div>
				</template>
				//JS 逻辑行为层
				<script>
					import Users from './components/Users'
					export default {
					  name: 'App',
					  data(){
					    return{
					      publicData:"我是很多组件公用的数据"
					    }
					  },
					  components:{
					    Users,
					  }
					}
				</script>
				<style>
				</style>

熟悉传值就就是在<users></users>上面自定义一个属性，然后绑定给子组件：

				 <users v-bind:public="publicData"></users>

这里的publicData是父组件的数据，而public则是自定义绑定的属性，上面的代码的可以理解为把数据publicData 绑定到public上
然后把public上的数据抛给User.vue。所以在Users组件中就可以接受到public上的数据。子组件接受的方式是：

					props:{
				        public:{
				            type:String
				        }  
				    }

这样我们就可以在子组件中使用public上面的publicData数据了；

事件传值

事件传值即是子组件向父组件传值，个人理解如下（传值的过程即是，抛出数据的过程和接受数据的过程，这里的事件传值顾名思义，这两个过
程是有事件触发的，抛出数据的过程是有子组件通过事件的方式把数据绑定在事件上，接受的过程是有父组件通过事件接受数据）
这里假设一个例子，由子组件user的把数据name，传给父组装件，从而改变父组件的name的值。

						// 结构层
						<template>
						   <div class="users">
						       <h1>{{tit}}</h1>
						       <h2>{{public}}</h2>
						       <button v-on:click ="changeName">点击传值父组件</button>
						   </div> 
						</template>
						// 行为层
						<script>
						export default {
						    name:"Users",
						    data(){
						        return{
						            tit:'我是users页面'
						        }
						    },
						    props:{
						        public:{
						            type:String
						        }  
						    },
						    methods:{
						        changeName:function(){
						            this.$emit("nameChanged","我的名字已经因为子组件传值发生改变")
						        }
						    }
						}
						</script>
						//样式层
						<style scoped>
						    h1{
						        color: red;
						    }
						</style>

	//首先在Users子组件上绑定一个事件     
	  
	<button v-on:click ="changeName">点击传值父组件</button>
	
	//然后在methods里面注册事件
	 methods:{
	        changeName:function(){
	            this.$emit("nameChanged","我的名字已经因为子组件传值发生改变")
	        }
	   }
	//这里是当changeName事件触发的时候利用$emit 注册一个事件，$emit有两个参数一个是注册事件的名字，还有一个是注册事件
	需要传递的值，这个例子里面分别是 nameChanged 和 ~~"我的名字已经因为子组件传值发生改变"~~ 。当在子组件中触发
	changName事件时，就会触发$emit 注册的事件， 从而寻找nameChanged事件。所有我们只需要在父组件中找到父子组件之间桥梁关
	系的 <users></users>然后绑定一个自定义事件nameChanged 。这个绑定的事件要和子组件中注册的事件
	的名字保持一致，自定义事件的名字可以随便去这里我们先起名为nameUpdate，因为需要传值，这里需要一个参数$event。
	
	<users v-bind:public="publicData" v-on:nameChanged="nameUpdate($event)"></users>
	
	然后在methods里面写nameUpdate()事件。
	
			methods:{
			    nameUpdate:function(name){
			      this.name  = name;
			    }
			  },