Advertisement

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)

还没有任何评论哟~