请教一个 vue 中组件复用的问题

[yezheyu]

如何让复用的组件内部代码随着切换多次执行呢？

App.vue 组件：有两个按钮，点击按钮下面 div 显示对应按钮中的文字

<template>
    <button @click="changeData($event)">user1</button>
    <button @click="changeData($event)">user2</button>
    <User :name="data"></User>
</template>

<script setup>
    import { ref } from 'vue';
    import User from './components/user.vue';
    let data = ref('')

    function changeData(e) {
        data.value = e.target.innerText
    }
</script>

User.vue 组件：

<template>
    <div> {{ name }} </div>
    <!-- <div> {{ attrs.name }} </div> -->
</template>

<script setup>
    import { useAttrs } from 'vue';
    let attrs = useAttrs()
    let name = attrs.name
    console.log(name);
</script>

User 组件内部的代码只会执行一次，`console.log` 不会随着 button 的点击事件执行多次，不符合预期

如果在 template 中直接使用 attrs.name 是没问题的，不会丢失响应式

如果使用变量 name 接收，因为组件内部代码只执行一次的缘故，就不能实现切换文字效果

如何才能让 User 组件内部的代码随着 button 点击多次执行呢？

[Zzzz77]

@yezheyu #20 这种情况你不需要绑定这个 key 啊，父组件传递的 data 发生了改变，User 中接收的 data 这个 prop 自然会跟着变。楼上让绑定 key 只是为了让组件重新渲染从而达到重新执行生命周期这个目的，这是一种偏门骚操作，除非有什么极其特殊的需求（反正我没遇到过），不然绝对不推荐这么做，而你的需求只是最基本的父子组件传值而已，当然也不该这么做，如果有取值以外的副作用需要执行，正常 watch 就行。

[BaiLinfeng]

@Zzzz77 这句话是说组件只会运行一次吗？不理解，可以详细解说下，感谢。“楼上让绑定 key 只是为了让组件重新渲染从而达到重新执行生命周期这个目的，”

[Zzzz77]

@BaiLinfeng 当然呀，一般情况组件只有被载入的时候会初始化一次，例如第一次加载，例如从 v-if="false"到 v-if="true"后。各个生命周期也就是在这时候开始执行的。