VUE 父子组件传值

最新推荐文章于 2024-05-17 14:32:46 发布

Teln_小凯

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量338

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq873113580/article/details/127094068

版权

VUE 专栏收录该内容

74 篇文章 0 订阅

订阅专栏

1、父值不能在子组件修改，需要通过子组件事件返回给父组件

父组件

<template>
    <div>
   		<test :value="value" @change="change"></test>
    </div>
</template>

<script>
import test from '@/components/test.vue'
export default {
	components: {
        test
    },
    data() {
        return {
        	value: '父组件的值'
        };
    },
    methods: {
        change (value) {
            this.value = value
        }
    }
}
</script>


子组件
<template>
    <div>
    	<div>{{ value }}</div>
    	<button @click="change">改变父组件的值</van-button>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: String
        }
    },
    methods: {
        change () {
            this.$emit('change', '子组件调用父组件的change方法修改的')
        }
    },
};
</script>

2、子组件可以修改父组件的值（双向绑定）

父组件
<template>
    <div>
   		<test v-model="value"></test>
    </div>
</template>

<script>
import test from '@/components/test.vue'
export default {
	components: {
        test
    },
    data() {
        return {
        	value: '父组件的值'
        };
    }
}
</script>
子组件
<template>
    <div>
    	<div>{{ value }}</div>
    	<button @click="change">改变父组件的值</van-button>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: String
        },
    },
    model: {
    	prop: 'value',
    	event: 'changes'
    }
    methods: {
        change () {
            this.$emit('changes', '在子组件中修改父组件的值')
        }
    },
};
</script>