Vue 3的组件传参，参数变化监听，事件回调 2024-07-1

Vue 3组件

Vue 3组件里，我们会有外部的传参，这个传参在组件内部是不能修改的。我们有时会面临以下几个问题：

1. 传递过来的参数有时候，我们需要监听其变化；以便做业务逻辑处理。
2. 一般使用组件内部的变量接收这个参数，我们的业务逻辑会改变这个内部变量。
3. 组件内部变量发生变化时，我们通过事件的机制通知外层调用方。

组件实现

下面是一个具体的实例：

<template>
    <div>
        <div>
            <span>props.content: {{ content }}</span>
        </div>
        <div>
            <span>inner.content: {{ innerContent }}</span>
        </div>
        <button @click="changeInner">Component Click</button>
    </div>
</template>

<script lang="ts">
export default {
    props: ['content'],
    emits: ['change'],
    name: "DemoComponent",
    data() {
        return {
            innerContent: this.content,
            count: 1,
        }
    },
    watch: {
        innerContent(newV, oldV) {
            console.log('innerContent variable  changed!')
        },
        content(newV, oldV) {
            console.log('props.content changed!')
        }
    },
    computed: {
        doc() {
            return this.content
        }
    },
    methods: {
        changeInner() {
            this.count++
            this.innerContent = "inner count=" + this.count
            this.$emit('change', this.innerContent)
        }
    },
    mounted: function () {
        this.count++
    }
}
</script>

<style scoped>
div {
    height: 100%;
    text-align: left;
}
</style>

在这个组件里，content是个外部传参，我们通过watch机制监听传参。当Component Click被点击后，调用changeInner方法去改变内部变量innerContent，这时watch会监听到innerContent有变化，输出日志：innerContent variable changed!

外部调用

调用代码如下，这里在调用DemoComponent组件里，有一个事件监听@change：

<template>
    <div>
        <NavBar />
        <main class="container">
            <DemoComponent :content="cont" @change="onChange"/>
            <div>
                <span>Parent.message: {{ msg }}</span>
            </div>
            <button @click="parentChange">Parent Click</button>
        </main>
    </div>
</template>

<script setup>
import { ref } from "vue";
let time = 0;
const cont = ref('parent content init value');
const msg = ref('');

const parentChange = () => {
    time = time + 1;
    cont.value = "parent content, Time:" + time
}

function onChange(value) {
    msg.value = 'recevied msg: ' + value
}
</script>

最终效果