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>
相关推荐
山河木马6 分钟前
前端学C++可太简单了:双冒号 :: 操作符
前端·javascript·c++
3Katrina7 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者13 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享22 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享23 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海27 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子37 分钟前
深入理解TCP协议
前端·javascript·面试
万少38 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲1 小时前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl