组件自己不能删除自己，$destroy只能把组件实例从组件树上删除，但视图中还是有。
正确的做法是在父组件中，通过v-if删除子组件
jsx就是不加载不加载子组件
下面是一个简单的实例，注意vue.js路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id='app'>
<template id='temp'>
<div >
<list></list>
</div>
</template>
</div>
<script src="../../vue.js"></script>
<script>
const arr= [
{id:'0', ctt: 'aaa'},
{id:'1', ctt: 'bbb'},
{id:'2', ctt: 'ccc'},
]
const item={
name:'item',
props:{ctt: String, id:String},
render(h) {
const btn= h('button', '删除')
return h('div', {
attrs: {id: this.id}
}, [
this.ctt,
btn
])
}
}
function handle_click(e) {
const id= e.target.getAttribute('id')
this.arr.splice(+id, 1)
}
function render(h) {
const content= this.arr.map(d=> {
return h(item, {
props: {ctt: d.ctt, id: d.id}
})
})
return h('div', {
on: {click: this.handle_click}
}, content)
}
function data() {
return {
arr: arr
}
}
const list= {
name: 'list',
data,
render,
methods: {handle_click}
}
const vm=new Vue({
el:"#app",
template:'#temp',
components:{list}
})
</script>
</body>
</html>
版权声明：本文为qq_41737172原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。