Vue实现父子组件之间的数据传输,并且实现了组件封装 Vue实现父子组件之间的数据传输,并且实现了组件封装
发布时间
阅读量:
阅读量
需求描述:开发一个进度条模块,当用户对该模块进行点击操作时,将相关参数传递至父级组件。
父级组件通过属性方式向子级组件传递数据,子级组件则利用props属性来获取父级组件所传递的参数。
子级组件借助$emit方法向父级组件发送数据,父级组件通过对应的处理函数来接收来自子级组件的数据。
父级组件:parent.vue
<template>
<div>
<Progress v-for="(item,index) in text" :key="index" :parentData="item" @clickProgress="progress"></Progress>
</div>
</template>
<script>
import Progress from '@/pages/test' //引入子组件
export default {
components:{
Progress
},
data() {
return {
text:[
{name:'CO',value:100,min:0,max:600,
全部评论 (0)
还没有任何评论哟~
