0
点赞
收藏
分享

微信扫一扫

[vue]组件之间通信

杰森wang 2022-04-22 阅读 188
vue.js

[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的值

举报

相关推荐

0 条评论