vue点击按钮动态创建与删除组件功能 - 行业资讯 - 肥雀云

　　<李>点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示李　　<李>点击右侧创建的组件中的删除按钮,删除对应的组件　　<李>删除对应的组件之后,下方的组件位置自动上移　　　　

父组件代码(去除了css样式代码):

　　　　　　& lt; template> 　　& lt; div类=凹摇北? 　　& lt; div类="容器"比; 　　& lt; div类=癮ddZujian”比; 　　& lt; div> 　　& lt; span>组件库& lt;/span> 　　& lt;跨度祝辞点击使用& lt;/span> 　　& lt;/div> 　　& lt; div类=皕ujianBtn @click”=皕ujian”祝辞添加组件1 & lt;/div> 　　& lt; div类=皕ujianBtn @click”=皕ujian2”祝辞添加组件2 & lt;/div> 　　& lt;/div> 　　& lt; div类=皕ujianContent”比; 　　& lt; div>组件展示区& lt;/div> 　　& lt; !——Vue提供了组件,来展示对应名称的组件——比; 　　& lt; !——组件是一个占位符:是属性,可以用来指定要展示的组件的名称——比; 　　& lt;组件　　v代表="(项目,索引)comName” 　　:=" item.name " 　　:关键="指数” 　　@func=" getContent(指数)” 　　祝辞& lt;/component> 　　& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　& lt;/template> 　　& lt; script>//引入子组件　　从“。/进口zujian1 zujian”; 　　从“。/进口zujian2 zujian2”; 　　出口默认{ 　　数据(){ 　　返回{ 　　comName: [] 　　}; 　　}，　　组件:{ 　　zujian1, 　　zujian2 　　}，　　方法:{//添加组件1 　　zujian () { 　　this.comName.push ({ 　　名称:“zujian1” 　　}); 　　}，//添加组件2 　　zujian2 () { 　　this.comName.push ({ 　　名称:“zujian2” 　　}); 　　}，//删除组件　　getContent(指数){ 　　this.comName.splice(指数(1); 　　} 　　} 　　}; 　　& lt;/script> 　　　　

　　　　　　& lt; template> 　　& lt; div类=凹摇北? 　　& lt; div类="容器"比; 　　& lt; span>我是组件1 & lt;/span> 　　& lt;跨类=皑尅盄click=皑尅弊４巧境榧? lt;/span> 　　& lt;/div> 　　& lt;/div> 　　& lt;/template> 　　& lt; script> 　　出口默认{ 　　数据(){ 　　返回{}; 　　}，　　方法:{ 　　德尔(){//子组件向父组件传值(此处传递一个空值)——父组件将执行getContent方法　　这发出(“函数”,“美元)。　　} 　　} 　　}; 　　& lt;/script> 　　　　

　　　　　　& lt; template> 　　& lt; div类=凹摇北? 　　& lt; div类="容器"比; 　　& lt; span>我是组件2 & lt;/span> 　　& lt;跨类=皑尅盄click=皑尅弊４巧境榧? lt;/span> 　　& lt;/div> 　　& lt;/div> 　　& lt;/template> 　　& lt; script> 　　出口默认{ 　　数据(){ 　　返回{}; 　　}，　　方法:{ 　　德尔(){//子组件向父组件传值(此处传递一个空值)——父组件将执行getContent方法　　这一点。美元发出(“函数”、“); 　　} 　　} 　　}; 　　& lt;/script> 　　　　

以上所述是小编给大家介绍的vue点击按钮动态创建与删除组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
　　如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!