vue點(diǎn)擊按鈕動(dòng)態(tài)創(chuàng)建與刪除組件功能

更新時(shí)間：2019年12月29日 10:37:40 作者：其然123

這篇文章主要介紹了vue點(diǎn)擊按鈕動(dòng)態(tài)創(chuàng)建與刪除組件功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

主要功能需求點(diǎn)：

點(diǎn)擊左側(cè)組件庫按鈕創(chuàng)建對(duì)應(yīng)的不同的組件，并在右側(cè)區(qū)域展示
點(diǎn)擊右側(cè)創(chuàng)建的組件中的刪除按鈕，刪除對(duì)應(yīng)的組件
刪除對(duì)應(yīng)的組件之后，下方的組件位置自動(dòng)上移

效果圖：

代碼：

父組件代碼（去除了css樣式代碼）：

<template>
 <div class="home">
  <div class="container">
   <div class="addZujian">
    <div>
     <span>組件庫</span>
     <span style="color:#bbb;margin-left:10px;font-size:14px;">點(diǎn)擊使用</span>
    </div>
    <div class="zujianBtn" @click="zujian">添加組件1</div>
    <div class="zujianBtn" @click="zujian2">添加組件2</div>
   </div>
   <div class="zujianContent">
    <div>組件展示區(qū)</div>
    <!-- Vue提供了 component ,來展示對(duì)應(yīng)名稱的組件 -->
    <!-- component 是一個(gè)占位符, :is 屬性,可以用來指定要展示的組件的名稱 -->
    <component
     v-for="(item,index) in comName"
     :is="item.name"
     :key="index"
     @func="getContent(index)"
    ></component>
   </div>
  </div>
 </div>
</template>
<script>
// 引入子組件
import zujian1 from "./zujian";
import zujian2 from "./zujian2";
export default {
 data() {
  return {
   comName: []
  };
 },
 components: {
  zujian1,
  zujian2
 },
 methods: {
  // 添加組件1
  zujian() {
   this.comName.push({
    name: "zujian1"
   });
  },
  // 添加組件2
  zujian2() {
   this.comName.push({
    name: "zujian2"
   });
  },
  // 刪除組件
  getContent(index) {
   this.comName.splice(index, 1);
  }
 }
};
</script>

子組件1代碼（去除了css樣式代碼）：

<template>
 <div class="home">
  <div class="container">
   <span>我是組件1</span>
   <span class="del" @click="del">刪除組件</span>
  </div>
 </div>
</template>
<script>
export default {
 data() {
  return {};
 },
 methods: {
  del() {
   // 子組件向父組件傳值（此處傳遞一個(gè)空值） - 父組件將執(zhí)行g(shù)etContent方法
   this.$emit('func','')
  }
 }
};
</script>

子組件2代碼（去除了css樣式代碼）：

<template>
 <div class="home">
  <div class="container">
   <span>我是組件2</span>
   <span class="del" @click="del">刪除組件</span>
  </div>
 </div>
</template>
<script>
export default {
 data() {
  return {};
 },
 methods: {
  del() {
   // 子組件向父組件傳值（此處傳遞一個(gè)空值） - 父組件將執(zhí)行g(shù)etContent方法
   this.$emit("func", "");
  }
 }
};
</script>

總結(jié)

以上所述是小編給大家介紹的vue點(diǎn)擊按鈕動(dòng)態(tài)創(chuàng)建與刪除組件功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: