当 isActive 为 true 时，HTML 将被渲染成为：
<p class="active">Hi</p>
如果你的组件有多个根元素，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作：
实例
<div id="app">
<runoob class="classA"></runoob>
</div>
<script>
const app = Vue.createApp({})
app.component('runoob', {
template: `
<p :class="$attrs.class">I like runoob!</p>
<span>这是一个子组件</span>
`
})
app.mount('#app')
</script>
注意：template 中 ` 是反引号，不是单引号 '。
以上实例 div class 渲染结果为：
<div id="app" data-v-app=""><p class="classA">I like runoob!</p><span>这是一个子组件</span></div>
|
