<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3>动态组件和v-once指令</h3>
<!-- vue自带动态组件标签 -->
<!-- is绑定一个数据，根据is的变化加载不同的组件 -->
<component :is=‘type‘></component>
<button @click="handleClick">change</button>
</div>
</body>
<script type="text/javascript">
// v-once指令，当组件没有v-once指令时，切换组件的时候会频繁的创建组件和销毁组件
// 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
Vue.component(‘child-one‘, {
template: `<div>child-one</div>`
})
Vue.component(‘child-two‘, {
template: `<div>child-two</div>`
})
let vm = new Vue({
el: ‘#app‘,
data: {
type: ‘child-one‘
},
methods: {
handleClick () {
this.type = this.type == ‘child-one‘ ? ‘child-two‘ : ‘child-one‘
}
}
})
</script>
</html>
原文地址：https://www.cnblogs.com/JunLan/p/12426268.html
时间： 2024-07-31 08:55:14