Vue(四)

组件:

Vue中的组件主要用于提高代码的复用性、‌模块化、‌可维护性、‌可扩展性,‌并增强开发效率。‌

提高代码复用性和模块化:‌

组件是Vue中的一个重要概念,‌它们是可复用的Vue实例,‌拥有独一无二的组件名称。‌通过扩展HTML元素,‌组件可以以自定义的HTML标签形式出现,‌从而将代码组织成较小的、‌易于管理的块。‌这种方式允许开发人员将复杂的应用程序分解为更易于管理的部分,‌减少重复代码,‌提高可维护性。‌

增强可扩展性和开发效率:‌

组件允许创建可扩展且松散耦合的应用程序。‌新功能和特性可以通过添加新组件或修改现有组件轻松添加,‌而无需修改整个应用程序。‌使用预构建的组件,‌开发人员可以专注于应用程序的业务逻辑,‌而不是重复创建通用UI元素,‌从而缩短开发时间并提高生产力。‌

创建动态UI:‌

组件具有响应性和动态更新的能力。‌它们可以接受输入,‌响应事件,‌并渲染基于状态变化的用户界面。‌这允许创建交互式且动态的应用程序。‌

增强可测试性和可维护性:‌

组件封装了特定和孤立的功能,‌使得它们更易于测试和维护。‌开发人员可以专注于测试单个组件,‌而不必担心其对应用程序其他部分的影响。‌此外,‌组件化开发还提供了更好的组织结构,‌使得代码结构更加清晰,‌易于管理和维护。‌

支持可移植性和团队协作:‌

组件化开发有助于提高应用程序的可移植性,‌促进团队协作。‌通过将不同的功能模块分别封装成组件,‌可以减少代码复杂性和维护成本

组件在实例中展示:

这是一个全局的父组件

<div id = "app">
  <zujian></zujian>
</div>

实例与组件之间的数据不互通

实例和组件之间的数据是不互通的,

组件的数据一般只能在组件中使用

<body>
    <div id = "app">
        <child></child>
    </div>
    <template id="child">
        <div>
            <div>{{str}}</div>
            <div v-for = "item in arr" :key="item">
                <div>{{item}}</div>
            </div>
        </div>
    </template>
</body>

<script>
    let vm = new Vue({
        data(){
            return {

            }
        },
        components:{
            "child":{
                template:"#child",
                data(){
                    return{
                        str:"这是子组件",
                        arr:["哈哈哈哈","和嘿嘿","喂喂喂"]
                    }
                }
            }
        }
    })
    vm.$mount("#app");
</script>

组件之间的复用

父组件与子组件(局部组件)

<script>
    let vm = new Vue({
        data(){
            return {

            }
        },
        components:{
            "child":{
                template:"#child",
                data(){
                    return{
                        str:"这是子组件",
                        arr:["哈哈哈哈","和嘿嘿","喂喂喂"]
                    }
                }
            }
        }
    })
    vm.$mount("#app");
</script>

实例是顶级父组件,实例里面的组件和实例的关系就是父子组件

父子组件传递数据

父组件像子组件传递的数据,可以使用正向传递:

<body>
    <div id="app">
        <zujian :zufuchuan="str" :zifuchuan2="str2"></zujian>
      //传递数据的地方
    </div>
    <template id="zujian">
        <div>
            <div>{{zufuchuan}}</div>
            <div>{{zifuchuan2}}</div>
        </div>
    </template>
</body>

这里在实例中,zujian这里,用来接受实例传递的数据,并在子组件中用props数组接收,这样这个数据就可以用了

<script>
    let vm = new Vue({
        data(){
            return{
                str:"氨基酸覅偶阿萨德否",
                str2:"hi家覅殴打撒女iowj"
            }
        },
        components:{
            "zujian":{
                template:"#zujian",
                data(){
                    return {

                    }
                },
                props:["zufuchuan","zifuchuan2"]
              //接收数据的地方
            }
        }
    })
    vm.$mount("#app");
</script>

用props数组接受数据

子组件向父组件传递数据,不支持

子组件向父组件传递数据

子组件无法直接向父组件传递数据

需要先定义一个run()方法,把数据通过视图模板传递给父组件,父组件写一个methods的fun()监听方法,接收子组件的值,拿到之后,在自己的data中写出来,才能用。

<body>
    <div id="app">
        <div>子组件传递过来的数据:{{ziStr}}</div>
        <parent @event="fun"></parent>
    </div>
    <template id="parent">
        <div>
            <button @click="run">子组件像父组件传递数据</button>
        </div>
    </template>
</body>

<script src="../js/vue.min.js"></script>
<script>
    Vue.component("parent",{
        template:"#parent",
        data(){
            return{
                str:"子组件中的数据"
            }
        },
        methods:{
          //传给父组件
            run(){
                this.$emit('event',this.str);
            }
        }
    })
    let vm = new Vue({
        data(){
            return {
                ziStr:""
              //定义出来才能用
            }
        },
        methods:{
          //接收
            fun(value){
                console.log("value::",value);
                this.ziStr = value;
            }
        }
    })
    vm.$mount("#app")
</script>

局部路由

常用于侧边栏或着导航栏中

<body>
    <div id="app">
        <ul>
            <li>
                <router-link to="/tianmao">天猫</router-link>
            </li>
            <li>
                <router-link to="/taobao">淘宝</router-link>
            </li>
            <li>
                <router-link to="/jingdong">京东</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
    <template id="tianmao">
        <div>
            <h2>田毛毛</h2>
            <h2>田毛毛</h2>
            <h2>田毛毛</h2>
            <h2>田毛毛</h2>
            <h2>田毛毛</h2>
        </div>
    </template>
    <template id="taobao">
        <div>
            <h2>田毛毛1</h2>
            <h2>田毛毛1</h2>
            <h2>田毛毛1</h2>
            <h2>田毛毛1</h2>
            <h2>田毛毛1</h2>
        </div>
    </template>
    <template id="jingdong">
        <div>
            <h2>田毛毛2</h2>
            <h2>田毛毛3</h2>
            <h2>田毛毛3</h2>
        </div>
    </template>
</body>

需要导入router包

<script src="../js/vue-router.js"></script>

<script>
    let vm = new Vue({
        data(){
            return{

            }
        },
        router: new VueRouter({
            routes:[
                {
                  //这个是根路径,也就是刚进页面访问的数据
                    path:"/",
                    component:{
                        template:"#tianmao"
                    }
                },
                {
                    path:"/tianmao",
                    component:{
                        template:"#tianmao"
                    }
                },
                {
                    path:"/taobao",
                    component:{
                        template:"#taobao"
                    }
                },
                {
                    path:"/jingdong",
                    component:{
                        template:"#jingdong"
                    }
                },
            ]
        })
    })
    vm.$mount("#app");
</script>
相关推荐
耶啵奶膘28 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer084 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript