Vue父传子and子传父

父传子and子传父
正常来说每个组件都有独立的作用域，它们的信息是不能相互传递的但是有的时候孩子会用的父亲的信息，或者父亲用到孩子的信息，这时我们就需要特殊的手段了
父传子：

//在父组件中定义一个变量
data:{
	num:10
	}

<son :nums = 'num'></son>  

子组件命名为son。在父组件中給nums绑定值nums是随便起的，num是属性的值的名字，可以是值类型也可以是引用类型然后通过v-bind动态绑定。

然后在子组件添加props，值为nums,就可以在子组件使用nums了

props:['nums']

也可以给props设置一些属性

props:{
	//如果类型不一致的话会报错
	type:Number
	//如果想要运行多个类型的话可以写成
	type:[String, Number],
	//表示是否必须传值，若为true必须要传
	required:true,
	//默认值，如果不传值便会采用默认值，这个和required冲突
	default:100
	//对象或数组设置默认值必须从一个工厂函数获取
	default:function(){
		return {}
	}
}

子传父：
props也可以进行子传父

data() {
	return {
			num: ''  //父元素设置一个属性接收数据
		    }
		},
methods: {  //设置一个函数命名为change
	change(msg) {
		this.num = msg     
				}
		},

<son :change='change'></son> //把函数传入子组件

props:['change'],  //子组件姐接受函数并命名一个变量
	data() {
		return {
			nam: 100
			}
	},

//子元素设置一个点击事件当点击时触发meg方法，meg方法触发change，
//并将子组件的值传入，实现父组件更改本身
//在组件中this代表组件本身
<button type="button" @click="meg">改变</button>  
methods:{
	meg(){
		this.change(this.nam)
		}
	}

但是这种方法比较麻烦所以我们还可以使用$emit()

vm.$emit( eventName, […args] )
触发当前实例上的事件。附加参数都会传给监听器回调。
这是官网的说法

子组件创建一个点击事件，当被点击的时候调用launch方法
<button type="button" @click="launch ">发射</button>

data(){
	return{
			num:1
		}
	},
launch(){  //使用$emit发射，$emit有两个值第一个是父组件事件的名字，
//第二个是传递的值，
	this.$emit('hello',this.num)
		}

//在son组件设置一个自定义事件，事件名为$emit的第一个值
 	<son @hello='launchs'></son> 

methods:{    //msg是子组件发送过来的值
	launchs(msg){
		console.log(msg)
		}	
	},