手册目录
Vue教程
Vue扩展
即使某些内容从带有 <Teleport> 标签的组件中移出，组件内 <script> 和 <style> 标签中的相关代码仍然适用于移动的内容。
<style> 和 <script> 标签中的相关代码仍然适用于传送的 <div> 标签，即使它在编译后不再位于组件内部。
CompOne.vue:
<template>
<div>
<h2>组件</h2>
<p>这是组件的内部。</p>
<Teleport to="body">
<div
id="redDiv"
@click="toggleVal = !toggleVal"
:style="{ backgroundColor: bgColor }"
>
Hello!<br>
Click me!
</div>
</Teleport>
</div>
</template>
<script>
export default {
data() {
return {
toggleVal: true
}
},
computed: {
bgColor() {
if (this.toggleVal) {
return 'lightpink'
}
else {
return 'lightgreen'
}
}
}
}
</script>
<style scoped>
#redDiv {
margin: 10px;
padding: 10px;
display: inline-block;
}
#redDiv:hover {
cursor: pointer;
}
</style>
相关视频
科技资讯
24小时阅读榜
1
2
3
4
5
6
7
8
9
10
精品课程
共5课时 | 17.4万人学习
共49课时 | 78.2万人学习
共29课时 | 62.5万人学习
共25课时 | 39.7万人学习
共43课时 | 73.8万人学习
