vue 组件自己不能删除自己，$destroy从组件树上删除+从视图上消失

组件自己不能删除自己，$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>

vue 组件自己不能删除自己，$destroy从组件树上删除+从视图上消失相关推荐

【Vue.js 3.0源码】KeepAlive 组件：如何让组件在内存中缓存和调度？
自我介绍:大家好,我是吉帅振的网络日志(其他平台账号名字相同),互联网前端开发工程师,工作5年,去过上海和北京,经历创业公司,加入过阿里本地生活团队,现在郑州北游教育从事编程培训. 一.前言多个平行 ...
vue之vue的生命周期、swiper、自定义组件的封装、自定义指令、过滤器、单文件组件及vue-cli
文章目录 1.vue的生命周期 1.1.8个生命周期函数 2.swiper 3.自定义组件的封装 4.自定义指令 4.1.定义 4.2.基本使用 4.3.利用自定义指令传入指定参数修改背景色 5.过滤 ...
Vue钩子函数以及父组件的8个钩子和子组件的8个钩子的先后执行的顺序
** vue组件生命周期 ** 一个组件从创建到销毁的整个过程就是生命周期生命周期函数(钩子函数) vue 框架内置函数,随着组件的生命周期,自动按次序执行作用:特定的时间点,执行某些 ...
【VUE项目实战】9、创建登录组件并绘制布局
接上篇<8.登录与退出功能开发准备(二)> 上一篇讲解了登录模块的开发的前置准备工作,本篇来正式开发登录模块. 一.创建登录组件并渲染下面我们创建一个根组件,并将根组件渲染到App根组件 ...
vue组件一直注册不了_Vue注册组件命名时不能用大写的原因浅析
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得. 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的 ...
js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
基于Vue的Quasar Framework 介绍这个框架UI组件很全面
基于Vue的Quasar Framework 介绍这个框架UI组件很全面基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarfra ...
vue 表单验证按钮事件交由父组件触发
vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法子组件: //内容部分 <Form ref="formCustom" :model="formC ...
div滚动到指定位置 vue_【Vue 进阶】从 slot 到无渲染组件
什么是插槽插槽(slot)通俗的理解就是"占坑",在组件模板中占有位置,当使用该组件的时候,可以指定各个坑的内容.也就是我们常说的内容分发值得一提的是,插槽这个概念并不是 Vu ...

vue 组件自己不能删除自己，$destroy从组件树上删除+从视图上消失

vue 组件自己不能删除自己，$destroy从组件树上删除+从视图上消失相关推荐

最新文章

热门文章