Vue 当子组件需要v-modal父组件传入的数据时

aら　淼

于 2021-02-26 15:49:14 发布

阅读量294

点赞数

分类专栏： vue 组件文章标签： vue 组件

本文链接：https://blog.csdn.net/geniusxyt/article/details/114135800

版权

vue 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

组件

6 篇文章 0 订阅

订阅专栏

父

<template>
<Child :user="users" @on-user-change="onUserChange" />
</template>
<script>
export default {
	components: {
    	Child
    },
    data(){
		return{
			users:["admin"]
		}
	},
	methods:{
		onUserChange(val){
			this.users = val;
		}
	}
}
</script>

子

<template>
<Input v-modal="_users" /> 
</template>
<script>
export default {
	porps: {
    	users: {
	      	type: Array,
	      	default: () => {
	        	return [];
	      	},
    	},
    },
	 computed: {
	      _users: {
	        get() {
	          return this.users;
	        },
	        set(val) {
	          // 只能由父组件改变其传入的值
	          this.$emit("on-user-change", val);
	        }
	      }
	    }
}
</script>