首页 > 其他分享 >vue组件介绍及应用

vue组件介绍及应用

时间:2022-12-09 07:55:25浏览次数:48  
标签:goods title default vue export 应用 组件 页面

一个.vue文件就是一个组件

组件都是由三部分组成:html结构(html结构都是在template标签中)、js逻辑、css样式

  • 1)template只能解析一个根标签
  • 2)js逻辑都是在script标签中,必须设置导出,export default {...}
  • 3)css样式都是在style标签中,必须设置scoped属性,是样式组件化
复制代码
<template>
    <div class="first-cp">
         <h1>第一个组件</h1>
    </div>
</template>

<script>
    // .vue文件类似于模块,可以直接相互导入,所以在组件内部要设置导出
    export default {

    }
</script>

<style scoped>
    /* scoped可以使样式组件化,只在自己内部起作用 */

</style>
复制代码

 根组件占位渲染页面组件

复制代码
<!--
1) App.vue是项目的根组件,是唯一由main.js加载渲染的组件,就是替换index页面中的<div id="app"></div>的占位标签
2) 实际开发中App.vue文件中,只需要书写下方五行代码即可(可以在此基础上额外增加其他代码)
3)router-view是前台路由占位标签,由router插件控制,可以在router的配置文件中进行配置
4) router-view就是根据router在index.js中配置的路由关系,完成指定路径匹配指定页面组件,进行渲染
5) router-view会被不同的页面组件替换,就形成了页面跳转
-->

<template>
    <div id="app">
        <!-- 前台路由占位标签,末尾的/代表单标签的结束 -->
        <router-view />
    </div>
</template>
复制代码

组件数据局部化处理

复制代码
"""
1)不管是页面组件还是小组件,都可能会被多次复用
2)复用组件,其实就是复用组件的 页面结构、页面样式、页面逻辑
3)但是页面上的数据需要区分(被复用的两个组件数据多少是有区别的),所以组件的数据要做局部化处理
4)借助函数可以产生局部作用域的特点,为每一次复用组件产生一个独立的作用域
语法:
data () {
    return {
        // 数据们
    }
}
"""
复制代码

案例:

子组件

复制代码
<template>
    <div class="beat" @click="count += 1">
        {{ count }}下
    </div>
</template>

<script>
    export default {
        name: "Beat",
        // 不管是页面组件还是小组件,都可能被复用,页面结构与样式都可以采用一套,但是数据一定要相互独立
        data () {
            return {
                count: 0
            }
        }
    }
</script>

<style scoped>
    .beat {
        width: 100px;
        height: 100px;
        background-color: orange;
        text-align: center;
        line-height: 100px;
        border-radius: 50%;
    }
</style>
复制代码

父组件

复制代码
<template>
    <div class="home">
        <Beat/>
        <Beat/>
    </div>
</template>
<script>
    import Beat from '@/components/Beat'
    export default {
        components: {
            Beat,
        }
    }
</script>
复制代码

父组件传递数据给子组件

复制代码
"""
一、组件传参 - 父传子
1)在子组件内部通过props设置组件的自定义属性
    props: ['abc', 'goods']
2)在父组件中渲染子组件是对自定义属性赋值即可
    <GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/>
"""
复制代码

子组件:

复制代码
<template>
    <div class="goods-box">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>

<script>
    export default {
        name: "GoodsBox",
        // 在组件内部通过props定义组件的自定义属性
        props: ['abc', 'goods'],
    }
</script>

<style scoped>
    .goods-box {
        width: 260px;
        height: 300px;
        border: 1px solid black;
        border-radius: 5px;
        margin: 20px;
        float: left;
        overflow: hidden;
        text-align: center;
    }
    img {
        width: 260px;
        height: 260px;
    }
</style>
复制代码

父组件:

复制代码
<template>
    <div class="goods">
        <div class="main">
            <!-- 在使用子组件是对自定义属性赋值即可 -->
            <GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods" />
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";

    let goods_list = [
        {
            img: require('@/assets/img/001.jpg'),
            title: '小猫',
        },
        {
            img: require('@/assets/img/004.jpg'),
            title: '小狗',
        },
    ];

    export default {
        name: "Goods",
        data () {
            return {
                goods_list,
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>
复制代码

子组件传递数据给父组件

复制代码
"""
二、组件传参 - 子传父
前提:子组件是被父组件渲染的,所以子组件渲染要晚于父组件
1)子组件一定要满足一个条件,才能对父组件进行传参(某个时间节点 === 某个被激活的方法)
    eg:i)子组件刚刚加载成功,给父组件传参 ii)子组件某一个按钮被点击的时刻,给父组件传参 iii)子组件要被销毁了,给父组件传参

2)在子组件满足条件激活子组件的方法中,对父组件发出一个通知,并将数据携带处理(自定义组件事件)
    <div class="goods-box" @click="boxClick"></div>
    methods: {
        boxClick () { this.$emit('receiveData', this.goods.title, '第二个数据', '第三个数据') }
    }

3)在父组件渲染子组件时,为自定义事件绑定方法
    <GoodsBox @receiveData="recFn"/>

4)在父组件实现绑定方法时,就可以拿到子组件传参的内容(接收到了通知并在父组件中相应)
        methods:{
            recFn(title,data2,data3){
                console.log('接收到了'+title);
                this.goodsTitle = title
            }

注意:组件标签不能绑定系统定义的事件,没有意义,子组件的事件都是在自己内部完成
"""
复制代码

子组件

复制代码
<template>
    <div class="goods-box" @click="boxClick">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>

<script>
    export default {
        props: ['abc', 'goods'],
        methods: {
            boxClick () {
                // 通知父级 - 自定义组件的事件 'receiveData',然后把数据 this.goods.title 传给父组件
                this.$emit('receiveData', this.goods.title)
            }
        }
    }
</script>
复制代码

父组件

复制代码
<template>
    <div class="goods">
        <div class="main">
            <!-- 实现自定义事件,接收子组件通知的参数 -->
            <GoodsBox v-for="goods in goods_list" @receiveData="recFn"/>
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";
    export default {
        name: "Goods",
        data () {
            return {
                goodsTitle: '哪个',
            }
        },
        methods: {
            recFn(title) {
                console.log('接收到了' + title);
                this.goodsTitle = title;
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>
复制代码

组件的生命周期钩子

"""
一、组件的生命周期:一个组件从创建到销毁的整个过程
二、生命周期钩子:在一个组件生命周期中,会有很多特殊的时间节点,且往往会在特定的时间节点完成一定的逻辑,特殊的时间节点可以绑定钩子
注:钩子 - 提前为某个事件绑定方法,当满足这个事件激活条件时,方法就会被调用 | 满足特定条件被回调的绑定方法就称之为钩子
"""
复制代码

标签:goods,title,default,vue,export,应用,组件,页面
From: https://www.cnblogs.com/lss1226/p/16967953.html

相关文章

  • 使用vuedraggable实现拖拽式操作实战
    OverridetheentrypointofanimageIntroducedinGitLabandGitLabRunner9.4.Readmoreaboutthe extendedconfigurationoptions.Beforeexplainingtheav......
  • Vue 官方文档2.x教程学习笔记 1 基础 1.8 列表渲染 1.8.1 用 v-for 把一个数组对应为
    OverridetheentrypointofanimageIntroducedinGitLabandGitLabRunner9.4.Readmoreaboutthe extendedconfigurationoptions.Beforeexplainingtheav......
  • vue+elementUI 使用腾讯地图
    OverridetheentrypointofanimageIntroducedinGitLabandGitLabRunner9.4.Readmoreaboutthe extendedconfigurationoptions.Beforeexplainingtheav......
  • CSS相对定位3大应用场景5个实战应用案例详解
    昨天发布的margin的5个重难点,受到了很多粉丝们的关注和收藏。我发现,作为学习Web前端开发的同学最大的痛苦莫过于,学了一堆知识,但到了实际的应用开发中不知道如何灵活运用。......
  • 【Vue】代理服务配置
     Springboot 后台接口地址基础路径配置:server:port:8080servlet:context-path:/demo完整路径:localhost:8080/demo Vue无代理服务......
  • <八>lambda表达是应用实践
    既然lambda表达式只能使用在语句中,如果想跨语句使用之前定义好的lambda表达式,怎么办?用什么类型来表示lambda表达式?用function类型来表示函数对象类型bind1st/bind2nd......
  • #yyds干货盘点#vue框架computed的原理
    computed原理,首先得讲vue响应式原理,因为computed的实现是基于​​Watcher​​​对象的。那么vue的响应式原理是什么呢?众所周知,vue是基于​​Object.definePrope......
  • element-ui表格组件的封装
    背景我们平常工作中需要用表格的形式来展示多行数据需求需求1:通过配置文件的形式来设置表格的列需求2:可以合并表头代码MyTable.vue<template><div><el-tabl......
  • Vue滑块验证
    登陆时加入滑块验证1、在src\components新建SilderVerify\index.vue文件<template><divclass="silder-range":class="rangeStatus?'success':''"><i@mousedo......
  • vue实现自定义字体库
      先看效果是不是你所需要的,再看具体如何实现。   效果如下图所示:         有些字体需要下载,用图片就会变得很不清楚,这样我们就需要去下载字......