vue父子组件之间传值

vue组件之间的传值，我们主要是解决项目中的问题，以下都是针对vue-cli脚手架的问题

vue项目的传值分为2大类：

父子组件之间的传值 ： 使用 props， $emit
非父子组件的传值，及全局传值: 使用 bus vuex

让我们来了解父子组件传值：

props： 子组件向父组件传值

 父组件: 
 	将fromData的值通过fromValue传给子组件

		 <template>
		 	<span>我是父组件</span>
		 	<Add-dialog  :fromValue="fromData" ></Add-dialog>
		 </template>
		  <script>
			export default {
			  data () {
			    return {
					fromData: '我是从父组件中传的值'
				}
			}			
		}
		</script>

子组件：
子组件通过props接收父组件传过来的值fromValue， 如果需要改变传过来的值，需要将fromValue重新赋值，否知会报提醒

		 <template>
		 	<span>我是子组件</span>
		 	{{fromValue}}  == {{fromNew}}
		 </template>
		 <script>
			export default {
			  props: {
			    fromValue: {
			      type: String, // 表示传入的值的类型是字符串
			      default: ''  // 如果没有传入这个值，默认为空字符串
			    }
			  },
			  data () {
			    return {
					fromNew: this.fromValue // 当fromValue修改改变时
				}
			}		
			}
		</script>

$emit： 父组件调用子组件的 方法
父组件:
将父组件的init方法传给子组件

		 <template>
		 	<span>我是父组件</span>
		 	<Add-dialog  :@initList="init"></Add-dialog>
		 </template>
		  <script>
			export default {
			 methods: {
			 init(item) {
			 	console.log('我是父组件的方法', item)
			 	}
			 }			
		}
		</script>

子组件：
子组件通过$emit调用initList方法，来调用父组件的init方法

		 <template>
		 	<span>我是子组件</span>
			<button @click="clickFun"></button>
		 </template>
		 <script>
			export default {
			 methods: {
			 clickFun() {
			 	this.$emit("initList", '我是从子组件中从给父组件的值')// 参数一： 表示调用的方法， 参数二： 表示传入的参数
			 	}
			  }	
			}
		</script>