[vue]组件之间通信

[vue]组件之间通信

parent.vue

<child id="" name="" to="" @give=""></child>

子组件接收父组件传值

子组件可以设置接收props的属性类型，校验等
不确定属性类型：可以设置为null

props: {
    to: {
        type: String,
        required: true
    },
    id:null,
    name: {
        type: String，
		validator(value) {//自定义校验
	   		 // 这个值必须与下列字符串中的其中一个相匹配
	   		 return ['success', 'warning', 'danger'].includes(value)
	  	}
    }
}

子组件触发父组件

vue2.x

this.$emit('give',param)

vue3.x

setup(props, { emit }) {
	emit("give", param);
}

param是子组件触发父组件时传递的值，如果存在传值的话

父组件获取子组件中值

<child ref="add"></child>

父组件获取子组件的值

this.$ref['add'].form

form 是子组件中的值，也可以通过子组件中methods中的方法获取 return的值