<!DOCTYPE html>
<html>
<head>
<title>动态组件和v-once</title>
<meta charset="utf-8">
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1.正常的组件切换我们是这么写的，先用v-if -->
<child-one v-if="type ==='child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two>
<!-- 2.使用事件点击触发 -->
<button @click="handleBtnClick">点我</button>
<!-- 4.现在可以不用这么麻烦 直接使用1个组件然后使用:is属性即可完成 -->
<child-two :is="type"></child-two>
</div>
</body>
<script type="text/javascript">
// 5.使用v-once的目的是。 Vue在默认情况下是在判断是否显示某个元素（：is)的时候会吧原先的元素注销掉。
// 但是如果碰到需要反复切换两个相同的元素显示的时候，它就会反复注销，创建，注销，创建。这样会损失掉一些性能
// 所以 如果使用了v-once的话，它就将元素放到缓存中，等待下一次调用。而不是销毁。
Vue.component('child-one', {
template: "<div v-once>child-one</div>"
})
Vue.component('child-two', {
template: "<div v-once>child-two</div>"
})
var vm = new Vue({
el: "#app",
data: {
type: 'child-one'
},
// 3.使用函数进行数据的改变
methods: {
handleBtnClick: function() {
this.type = this.type === "child-one" ? "child-two" : "child-one"
}
}
})
</script>
</html>
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
