请教一个 vue 中组件复用的问题
<p>如何让复用的组件内部代码随着切换多次执行呢？</p>
<p>App.vue 组件：有两个按钮，点击按钮下面 div 显示对应按钮中的文字</p>
<pre><code><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>
</code></pre>
<p>User.vue 组件：</p>
<pre><code><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>
</code></pre>
<br> User 组件内部的代码只会执行一次，`console.log` 不会随着 button 的点击事件执行多次，不符合预期
<p>如果在 template 中直接使用 <code><a href="http://attrs.name" rel="nofollow">attrs.name</a></code> 是没问题的，不会丢失响应式</p>
<p>如果使用变量 name 接收，因为组件内部代码只执行一次的缘故，就不能实现切换文字效果</p>
<p>如何才能让 User 组件内部的代码随着 button 点击多次执行呢？</p>
收藏(0)
分享
相关标签：
注意：本文归作者所有，未经作者允许，不得转载
-
2022年9月27日 08:47
定义 props
0
0
-
2022年9月27日 08:47
name 定义成 computed
0
0
-
2022年9月27日 08:47
props + watch
0
0
-
2022年9月27日 09:19
接 4 楼, 可以不用 watch, 用 toRef 或者 toRefs,
`const name = toRef(props, 'name')`
0
0
-
2022年9月27日 09:19
额, 好吧, 没看清楚, 如果要是想运行 console 的话, 还是要 watch 的
0
0
-
2022年9月27日 09:19
好使，多谢
能稍微解释下吗
0
0
-
2022年9月27日 09:19
#13
0
0
-
2022年9月27日 09:19
多谢老哥，明白了
0
0
-
2022年9月27日 12:46
这明显是 Props 。。
0
0
-
2022年9月27日 12:46
俺也觉得🐼
0
0
