Vue动态添加和删除组件的实现,子组件和父组件的传值实例演示
首先看下效果演示:
通过两部分实现。
子组件部分
下面的卡片就是我单独封装的组件,保存的组件名为 Card.vue,代码中 mdb 开头是 MDBootstrap 框架里的组件。
内容较多,这里主要关注的点就是删除按钮还有给父组件传值的方法。
<mdb-btn color="primary" @click="remove_son">删除</mdb-btn>
是删除按钮。
绑定方法里的 this.$emit("remove_father");
是用来给父组件传值的,remove_father 是父组件的方法名。
<template>
<mdb-col sm="4">
<mdb-card>
<mdb-view hover>
<a href="#!">
<mdb-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap" ></mdb-card-image>
<mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
</a>
</mdb-view>
<mdb-card-body>
<mdb-card-title>Card with waves effect</mdb-card-title>
<mdb-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</mdb-card-text>
<mdb-btn color="primary" @click="remove_son">删除</mdb-btn>
</mdb-card-body>
</mdb-card>
</mdb-col>
</template>
<script>
import { mdbCol, mdbCard, mdbCardImage, mdbCardBody, mdbCardTitle, mdbCardText, mdbBtn, mdbView, mdbMask } from 'mdbvue';
export default {
name: 'CardPage',
components: {
mdbCol,
mdbCard,
mdbCardImage,
mdbCardBody,
mdbCardTitle,
mdbCardText,
mdbBtn,
mdbView,
mdbMask
},
methods:{
remove_son(){
this.$emit("remove_father");
}
}
};
</script>
父组件部分
父组件里首先把子组件导入进来,然后根据数组、v-for 和 v-if 来实现动态添加组件。 点击新增会在数组里添加一个空字符串,点击删除会删除一个值,这样加载组件的多少就与数组的大小对应了,然后通过 v-for 来遍历组件。
<mdb-row class="mt-5" v-if="album">
<Card v-for="i in album" :key="i" @remove_father="remove_son"/>
</mdb-row>
这里的空字符串是做个演示,后面可以根据实例需求来传值。
其中 @remove_father="remove_son"
是接受子组件的传值。
<template>
<mdb-container>
<mdb-row class="mt-5 align-items-center justify-content-start">
<h4 class="demo-title"><strong>Album </strong></h4>
</mdb-row>
<hr class="mb-5" />
<mdb-btn color="primary" @click="add">添加</mdb-btn>
<mdb-row class="mt-5" v-if="album">
<Card v-for="i in album" :key="i" @remove_father="remove_son"/>
</mdb-row>
</mdb-container>
</template>
<script>
import { mdbContainer, mdbRow, mdbBtn } from 'mdbvue';
import Card from './Card.vue';
export default {
name: 'AlbumPage',
components: {
mdbContainer,
mdbRow,
mdbBtn,
Card
},
methods:{
add(){
this.album.push("");
},
remove_son(){
this.album.splice("", 1);
}
},
data(){
return{
album: []
}
}
};
</script>
子组件父组件传值
其实上面删除时不会删除对应的组件,如果想要删除对应的组件还需要改进一下。 为了上面的内容更好理解进行了精简,下面的内容是具体改进,这里新增了一个索引作为属性。 从效果图可以看出多了个索引值。
引入属性 <mdb-card-title>Card with waves effect {{index}}</mdb-card-title>
。
子组件通过 this.$emit("remove_father", this.index);
向父组件传值。
这是新增的属性:
props: {
index: String
}
子组件详细内容如下:
<template>
<mdb-col sm="4">
<mdb-card>
<mdb-view hover>
<a href="#!">
<mdb-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap" ></mdb-card-image>
<mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
</a>
</mdb-view>
<mdb-card-body>
<mdb-card-title>Card with waves effect {{index}}</mdb-card-title>
<mdb-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</mdb-card-text>
<mdb-btn color="primary" @click="remove_son">删除</mdb-btn>
</mdb-card-body>
</mdb-card>
</mdb-col>
</template>
<script>
import { mdbCol, mdbCard, mdbCardImage, mdbCardBody, mdbCardTitle, mdbCardText, mdbBtn, mdbView, mdbMask } from 'mdbvue';
export default {
name: 'CardPage',
components: {
mdbCol,
mdbCard,
mdbCardImage,
mdbCardBody,
mdbCardTitle,
mdbCardText,
mdbBtn,
mdbView,
mdbMask
},
props: {
index: String
},
methods:{
remove_son(){
this.$emit("remove_father", this.index);
}
}
};
</script>
父组件这里通过子组件定义的属性给子组件传值。
这里增加了个 index 的属性 <Card v-for="i in album" :key="i" :index="i" @remove_father="remove_son"/>
。
并且给数组添加的是索引,删除的话也是根据对应的索引值来删除。
methods:{
add(){
this.index++;
this.album.push(this.index);
},
remove_son(card){
this.album.splice(this.album.indexOf(card), 1);
}
},
data(){
return{
album: [],
index: 0
}
}
父组件详细内容如下:
<template>
<mdb-container>
<mdb-row class="mt-5 align-items-center justify-content-start">
<h4 class="demo-title"><strong>Album </strong></h4>
</mdb-row>
<hr class="mb-5" />
<mdb-btn color="primary" @click="add">添加</mdb-btn>
<mdb-row class="mt-5" v-if="album">
<Card v-for="i in album" :key="i" :index="i" @remove_father="remove_son"/>
</mdb-row>
</mdb-container>
</template>
<script>
import { mdbContainer, mdbRow, mdbBtn } from 'mdbvue';
import Card from './Card.vue';
export default {
name: 'AlbumPage',
components: {
mdbContainer,
mdbRow,
mdbBtn,
Card
},
methods:{
add(){
this.index++;
this.album.push(this.index);
},
remove_son(card){
this.album.splice(this.album.indexOf(card), 1);
}
},
data(){
return{
album: [],
index: 0
}
}
};
</script>
相关文章
- vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- vue 使用 axios 上传文件 — FormData
- 【说站】王者荣耀故事站小程序/含vue后台
- vue源码分析-从new Vue开始
- Vue Router 搭配 NaiveUI 的进度条
- 这可能是你需要的vue考点梳理
- vue 时间戳转换成yyyy-MM-dd hh:mm[通俗易懂]
- VUE组件封装_vue使用组件
- vue父组件调用子组件属性_vue子组件获取父组件实例
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- vue子组件怎么调用父组件的方法「建议收藏」
- vue-awesome-swiper的用法&同一页面有多个swiper如何使用
- 今天讲vue讲解专栏里的VUE组件
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- 【架构师(第三十三篇)】 Vue 中的实例及本地图片预览
- vue面试考察知识点全梳理
- HbuilderX安装node运行vue
- Vue组件滚动加载、懒加载功能的实现,无限滚动加载组件实例演示
- Vue的beforeRouteEnter如何使用组件实例的方法
- 【Vue 源码解析】Vue实例挂载过程
- Vue提示框组件vue-notification使用实例演示
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- 使用Vue从Redis获取数据(vue去redis取数据)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)