Vue父子传值与进度条实例（初学者）简单的父子组件

本文链接：https://blog.csdn.net/weixin_44668919/article/details/89527028

原创作品：别动；
请大家关注；后续会有更多资源有待于更新；
如果大家感兴趣希望大家能添加关注或者支持下原创作者：别动；谢谢
注：首先我们会用bootstrap里的资源：
我们先打开bootStrap,我会用四版本里的css样式；首先我们把样式导入HTML文件中：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

这是我们要使用的bootstrap里的css样式；
效果图
在这里插入图片描述
//打开bootstrap

//添加进入html页面中

找到组件

//找到进展（进度条），使用这条代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>//引入VUE代码块；
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">//引入bootstrap
    <style>
      .progress{
          background:chartreuse;
          height:100px;
          margin-top:30px;
      }
      .progress-bar{
          height:100px;
         
          background:coral;
      }
    </style>
</head>
<body>
    <div id="box">         //2.设置事件监听函数{v-on:事件="事件处理函数"}
       <One v-for="item in list" :n="item.n" :name="item.name" @fn="fn"></One>
       //组件           ：n     :name 都是使用了v-bind属性用来传值
       {{x}}//这是看谁先完成
            </div>
            <script>
                var One={
                    props:[
                        "n","name"
                    ],//我们用props来进行给子组件传值
                    created(){
                        
                        var time=setInterval(()=>{
                            this.v++
                               if(this.v >=100){
                                   clearInterval(time),
                                   
                                   this.$emit("fn",this.name)//1.子组件向父组件传值第一步，发送；
                               }
                        },100)
                       
                    },
                    data(){
                        return{
                            v:this.n
                        }
                       
                    },
                    template:`<div>
                            <div class="progress">
                <div class="progress-bar"  :style="{width:v+'%' }" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">                                    
                {{v}}%  //渲染
                </div>
              </div>
              
                    </div>`

                }
            new Vue({
                el:"#box",
                components:{
                One//注册组件
                },
                data:{
                //X我们要设置为空；
                    x:'',
                    list:[
                        {n:20,
                      name:"张三"},
                      {n:10,
                      name:"李四"},
                      {n:60,
                      name:"王二"},
                      {n:70,
                      name:"麻子"},
                      
                    ]
                },//3.这是第三步，在父组件的methods:{事件处理函数（参数）{
                //这是我们的事件要进行处理
                //}}
                methods:{
                    fn(p){
                    //x的使用我们要给在父组件的data中进行设置；
                 this.x="任务"+p+"已经完成"
                             //此处的p为发送的的数据可以任意
                    }
                }
            })

            
        </script>
    
</body>
</html>

谢谢大家的支持！！！！以后会更加努力的：
在这里插入图片描述