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>
相关推荐
程序媛-徐师姐5 分钟前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
yngsqq6 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing40 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风43 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng18402 小时前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站