vue 父组件与子组件之间如何传值 ---重学vue.js笔记(11)

一：父组件如何传值给子组件

问题一：

如何把父组件中的msg传递给子组件？

解决方法：

父组件传值给子组件使用的是属性传值方式。子组件中的props选项是用来接收父组件传来的数据。

1.在子组件中使用props选项接收父组件的值。

  let son={
			 template:'#test',
			 props:['msg2']
		 }

props对应的值可以是数组也可以是对象，这里使用数组的方式定义变量。

2…在子组件中使用v-bind指令作为父子之间变量的传递桥梁。

   <son :msg2=msg></son>

:是v-bind的缩写，使用msg2变量接收msg的值。

问题二：

父组件如何传递多个数据

props使用数组的方式进行接收即可，如[‘msg1’,‘msg2’,‘msg3’]

问题三：
如何对父组件传递过来的数据进行类型检查

props可以使用对象的方式可以限制传递过来的数据类型等。

  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,     
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true  // 必须要传递，否则控制台会显示错误
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100   // 默认值是100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
  validator:function(value){
       return  value>10     // 符合条件才返回
  }
}

二：子组件如何传值给父组件

子组件要传值给父组件，需要借助事件绑定方式@进行传递

1.给子组件对应的元素绑定一个事件

<template id="test">
			<div>
				<button @click="handleSend"> click me</button>
			</div>
		</template>

1. 使用$emit给父组件发射数据

 methods:{
		handleSend:function(){
			this.$emit('xx',this.sonData)
		}
			 }

在$emit方法中传入一些参数，第一个参数是用来关联父组件中定义的函数，第二个参数是需要传递的数据。

3.使用@关联父组件中定义的函数

 <son @xx='handleClick'></son>

xx是$emit定义的函数名，handleClick是父组件中定义的函数，用来接收数据的。

4.在父组件定义handleClick方法。

  methods:{
			handleClick:function(){
				console.log("事件触发了");
			 }
	}