Vue组件

一：组件化开发基础

1.组件是什么？有什么用？

img

组件就是：扩展 HTML 元素，封装可重用的代码，目的是复用
例如：有一个轮播图，可以在很多页面中使用，一个轮播有js，css，html
组件把js，css，html放到一起，有逻辑，有样式，有html

img

组件的分类：
  • 全局组件：可以放在根中
  • 局部组件：
工程化开发之后：

1个组件 就是1个xx.vue

二：组件的注册方式

1. 定义全局组件，绑定事件，编写样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    
<div id="box">
    <div @click="handleClick">我是根部组件</div>
    <global></global>
    <ul>
        <li v-for="i in 4">
            <global></global>
        </li>
    </ul>
</div>
    
</body>
<script>
    // 创建1个组件对象（全局组件）
    Vue.component('global', {
        template: `
            <div>
                <div style="background: rgba(255,104,104,0.7); padding: 5px;" @click="handleClick">我是头部组件</div>
                <div v-if="isShow">显示消失</div>
            </div>
        `,
        methods: {
            handleClick() {
                console.log('我被点击了')
                this.isShow = !this.isShow
            }
        },
        data() {
            return {
                isShow: true
            }
        }
    })
    let vm = new Vue({
        el: '#box',
        data: {
            isShow: true
        },
        methods: {
            handleClick() {
                console.log('我被点击了 我是根组件')
            }
        }
    })
</script>
</html>

img

3. 定义局部组件

① 局部组件 放在 Vue实例(根组件) 中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部组件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box" style="max-width: 300px">
    <local></local>
    <global></global>
</div>

</body>
<script>
    // 创建1个组件对象（全局组件）
    Vue.component('global', {
        template: `
            <div>
                <div style="background: rgba(255,104,104,0.7); padding: 5px 10px; border-radius: 5px;margin: 5px 0;">
                    我是全局组件
                </div>
            </div>
        `,
    })
    let vm = new Vue({
        el: '#box',
        data: {},
        // 创建1个组件对象（局部组件）
        components: {
            local: {    // local 组件名
                template: `
                    <div>
                        <div style="background: rgba(104,255,104,0.7); padding: 5px 10px; border-radius: 5px; margin: 3px 50px 3px 0;"
                             @click="handleClick">我是局部组件
                        </div>
                    </div>
                `,  // 组件的模板
                methods: {
                    handleClick() {
                        console.log('我被点击了')
                    }
                }
            }
        }
    })
</script>
</html>
② 局部组件 放在 全局组件 中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部组件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    
<div id="box" style="max-width: 300px">
    <ul>
        <li v-for="i in 3">
            <global></global>
        </li>
    </ul>
</div>
    
</body>
<script>
    // 创建1个组件对象（全局组件）
    Vue.component('global', {
        template: `
            <div>
                <div style="background: rgba(255,104,104,0.7); padding: 5px 10px; border-radius: 5px;margin: 5px 0;">
                    我是全局的组件
                </div>
                <local></local>
                <local></local>
                <br>
            </div>
        `,
        // 创建1个组件对象（局部组件）
        components: {
            local: {
                template: `
            <div>
                <div style="background: rgba(104,255,104,0.7); padding: 5px 10px; border-radius: 5px; margin: 3px 50px 3px 0;">我是局部组件</div>
            </div>
        `,
            }
        }
    })
    let vm = new Vue({
        el: '#box',
    })
</script>
</html>

img

注意点：

  • 定义的组件（body中的位置）必须要放在Vue实例（这也是一个组件 根组件）中
  • 局部组件 必须放在 全局组件/根组件 中，无法单独使用
  • 定义的组件必须在Vue实例的上方

二：组件编写方式 与 Vue实例的区别

Vue实例（其实，它也是1个组件，是1个根组件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li>字符串：{{name}}</li>
        <li>数值：{{age}}</li>
        <li><button @click="handleClick()">Click Here</button></li>
    </ul>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            name: 'Darker',
            age: 18,
        },
        methods: {
            handleClick() {
                alert('按钮被点击')
            }
        }
    })
</script>
</html>

组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部组件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    
<div id="box" style="max-width: 300px">
    <ul>
        <li v-for="i in 3">
            <global></global>
        </li>
    </ul>
</div>
    
</body>
<script>
    // 创建1个组件对象（全局组件）
    Vue.component('global', {
        template: `
            <div>
                <div style="background: rgba(255,104,104,0.7); padding: 5px 10px; border-radius: 5px;margin: 5px 0;">
                    我是全局组件
                </div>
                <local></local>
                <br>
            </div>
        `,
        // 创建1个组件对象（局部组件）
        components: {
            local: {
                template: `
            <div>
                <div style="background: rgba(104,255,104,0.7); padding: 5px 10px; border-radius: 5px; margin: 3px 50px 3px 0;">我是局部组件</div>
            </div>
        `,
            }
        }
    })
    let vm = new Vue({
        el: '#box',
    })
</script>
</html>

区别：

1.自定义组件需要有1个 root element，一般包裹在 1个div中

img

2.父子组件的data是无法共享的
  • 这一点就像Docker的容器一样，是相互隔离的
  • 就算父子的data中数据相同，拥有相同的方法，也是互不影响的
3.组件可以有data、methods、computed....，但是 data 必须是一个函数
Vue实例：data是1个键值对，用来存放属性的
var vm = new Vue({
    el: '#box',
    data: {
        isShow: true
    }
})
组件：data是1个函数，需要有返回值(return)
Vue.component('global', {
    template: `
        <div>
            <div style="background: rgba(255,104,104,0.7); padding: 5px;" @click="handleClick">我是头部组件</div>
            <div v-if="isShow">显示消失</div>
        </div>
`,
    methods: {
        handleClick() {
            console.log('我被点击了')
            this.isShow = !this.isShow
        }
    },
    data() {
        return {
            isShow: true
        }
    }
})

三：组件通信

1.父传子

  • 在全局组件中自定义属性：<global :myname="name" :myage="19"></global>
  • 在组件中获取：{{myname}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <!-- myName是自定义属性 -->
    <global myname="name" myage="18"></global>
    <global :myname="name" :myage="19"></global>
    <global :myname="'Ben'" :myage="20"></global>
</div>

</body>
<script>
    // 创建1个组件对象（全局组件/子组件）
    Vue.component('global', {
        template: `
            <div>
                <div style="background: rgba(255,104,104,0.7); padding: 5px;">全局组件/子组件</div>
                {{myname}}
                {{myage}}
            </div>
        `,
        props: ['myname', 'myage']
    })
    // 父组件
    let vm = new Vue({
        el: '#box',
        data: {
            name: 'darker'
        },
    })
</script>
</html>

img

属性验证
  • 限制父传子的变量类型
props: {
    myname: String,
    isshow: Boolean
}
  • 父传子时候注意以下区别
<global :myname="name" :is_show="'false'"></global>
<global :myname="name" :is_show="false"></global>
<global :myname="name" :is_show="is_show"></global>
  • 实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <!-- myName是自定义属性 -->
    <!--    <global :myname="name" :myage="19" :isshow="'false'"></global>-->
    <global :my_name="name" :is_show="is_show"></global>
    <global :my_name="name" :is_show="false"></global>
</div>

</body>
<script>
    // 创建1个组件对象（全局组件/子组件）
    Vue.component('global', {
        template: `
            <div>
                <div style="background: rgba(255,104,104,0.7); padding: 5px;">我是子组件:{{is_show}}</div>
                <span>{{my_name}}</span>
            </div>
        `,
        props: {
            my_name: String,
            is_show: Boolean
        }
    })
    // 父组件
    let vm = new Vue({
        el: '#box',
        data: {
            name: 'darker',
            is_show: true
        },
    })
</script>
</html>

2.子传父（通过事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子传父</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <global @my_event="handleClick($event)"></global>
</div>

</body>
<script>
    // 创建1个组件对象（全局组件/子组件）
    Vue.component('global', {
        template: `
            <div>
                <div style="background: rgba(255,104,104,0.7); padding: 5px;">全局组件/子组件</div>
                <button @click="handleNav">点我</button>
            </div>
        `,
        data() {
            return {
                name: 'Darker'
            }
        },
        methods: {
            handleNav() {
                console.log('我是子组件的函数')
                this.$emit('my_event', 666, 777, this.name)
            }
        }
    })
    // 父组件
    let vm = new Vue({
        el: '#box',
        data: {},
        methods: {
            handleClick(a,b,c) {
                console.log('我是父组件的函数')
                console.log(a)
                console.log(b)
                console.log(c)
            }
        }
    })
</script>
</html>

img

3.子传父（控制子组件的显示和隐藏）

点击子组件，就会触发父组件的某个函数执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子传父</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <global @my_event="handleClick($event)"></global>
</div>

</body>
<script>
    // 创建1个组件对象（全局组件/子组件）
    Vue.component('global', {
        template: `
            <div>
                <div style="background: rgba(255,104,104,0.7); padding: 5px;">全局组件/子组件</div>
                <button @click="handleNav">点我</button>
            </div>
        `,
        data() {
            return {
                name: 'Darker'
            }
        },
        methods: {
            handleNav() {
                console.log('我是子组件的函数')
                this.$emit('my_event', 666, 777, this.name)
            }
        }
    })
    // 父组件
    let vm = new Vue({
        el: '#box',
        data: {},
        methods: {
            handleClick(a,b,c) {
                console.log('我是父组件的函数')
                console.log(a)
                console.log(b)
                console.log(c)
            }
        }
    })
</script>
</html>

img

小案例
  • 子组件有1个按钮 和 1个输入框，子组件输入完内容后，数据在父组件中展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子传父 小案例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <global @my_event="handleShow($event)"></global>
    <br>
    <div>父组件接收到的数据：{{name}}</div>
</div>

</body>
<script>
    // 创建1个组件对象（全局组件/子组件）
    Vue.component('global', {
        template: `
            <div>
                <input type="text" v-model="myText">
                <button @click="handleClick">点我传数据</button>
            </div>
        `,
        data() {
            return {
                myText: ''
            }
        },
        methods: {
            handleClick() {
                this.$emit('my_event', this.myText)
            }
        }
    })
    // 父组件
    let vm = new Vue({
        el: '#box',
        data: {
            name: ''
        },
        methods: {
            handleShow(a) {
                this.name = a
            }
        }
    })
</script>
</html>

img

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/309882.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

UniApp调试支付宝沙箱（安卓）

UniApp调试支付宝沙箱（安卓）

先看下这里完整的交互的图&#xff1a;小程序文档 - 支付宝文档中心 一、打包 不管怎样&#xff0c;先打个包先。可以直接使用云端证书、云端打包&#xff0c;只需要指定包名即可。 二、在支付宝开放平台创建应用 这个参考官方的过程就可以了&#xff0c;只要有刚才打的包&…
阅读更多...
人工智能行业的发展前景如何？

人工智能行业的发展前景如何？

人工智能&#xff08;AI&#xff09;已经成为如今科技领域的热门话题之一&#xff0c;从图像识别到自动驾驶&#xff0c;从语音助手到智能机器人&#xff0c;AI技术正在改变我们的生活方式。随着技术的不断发展和应用的扩大&#xff0c;人工智能行业的发展前景无疑是非常广阔的…
阅读更多...
电池组不能充电的原因

电池组不能充电的原因

一、电池组不能充电的原因 01&#xff09;电池零电压或电池组中有零电压电池&#xff1b; 02&#xff09;电池组连接错误&#xff0c;内部电子组件&#xff0c;保护电路出现异常&#xff1b; 03&#xff09;充电设备故障&#xff0c;无输出电流&#xff1b; 04&#xff09;外部…
阅读更多...
linux kernel：devres模块架构分析

linux kernel：devres模块架构分析

参考文档&#xff1a; https://www.kernel.org/doc/html/latest/driver-api/driver-model/devres.html https://www.cnblogs.com/sammei/p/3498052.html devres in linux driver devres: Managed Device Resource device resource managementdevres_alloc()动态申请内存分配…
阅读更多...
最好的 6 个华为/小米/OPPO/VIVO手机数据恢复软件评测

最好的 6 个华为/小米/OPPO/VIVO手机数据恢复软件评测

如何恢复手机上已删除的文件&#xff1f;下载 华为/小米/OPPO/VIVO数据恢复是否安全&#xff1f;在这里&#xff0c;我们将与您分享最好的 华为/小米/OPPO/VIVO数据恢复软件&#xff0c;以恢复所有数据&#xff0c;包括照片、视频、应用程序数据等。阅读这篇文章并获得最可靠且…
阅读更多...
力扣题目的参数解释（力扣初用者必看指南）

力扣题目的参数解释（力扣初用者必看指南）

导入&#xff1a; 题目来源&#xff1a;leetcode 867 转置矩阵 参数列表&#xff1a; int** matrix int matrixSize int* matrixColSize int* returnSize int** returnColumnSizes 模仿main&#xff08;&#xff09;函数 完整代码 运行结果 最后本题的AC答案 结语&…
阅读更多...
了解数据链路层中的HDLC协议

了解数据链路层中的HDLC协议

HDLC&#xff08;High-Level Data Link Control&#xff09;协议是一种数据链路层协议&#xff0c;它定义了在数字通信中数据的传输和控制方式。HDLC协议具有简单高效、可靠可扩展等特点&#xff0c;在广域网和局域网中得到了广泛应用。本文将介绍HDLC协议的基本概念、工作原理…
阅读更多...
OpenAI大反击！称纽约时报涉嫌故意操纵，且数据是「合理使用」

OpenAI大反击！称纽约时报涉嫌故意操纵，且数据是「合理使用」

大家好我是二狗。 《纽约时报》向法院起诉OpenAI侵犯版权后续事件来了&#xff01; 就在今天&#xff0c;OpenAI进行了一场“危机公关”&#xff1a;直接在官方博客上撰文发声&#xff0c;反驳《纽约时报》的诉讼&#xff0c;其主要观点有四个&#xff1a; 1、我们正在和新闻…
阅读更多...
低代码的应用场景

低代码的应用场景

Gartner 在 2019 年的低代码调研报告中&#xff0c;曾经绘制过一张用来阐述低代码适用场景的“应用金字塔”&#xff0c;如下图所示&#xff1a; 应用级别划分&#xff1a;从下往上&#xff0c;分别为工作组级(Workgroup Class)、部门级(Departmental Class)、企业级(Enterpris…
阅读更多...
SV-298XT IP网络广播板 SV-298XT-共公广播音频模块IP网络广播板

SV-298XT IP网络广播板 SV-298XT-共公广播音频模块IP网络广播板

SV-298XT IP网络广播板 SV-298XT-共公广播音频模块IP网络广播板 SV-298XT网络广播模块是一款全数字网络型广播模组&#xff0c;核心部分采用了成熟的私有协议解决方案&#xff0c;性能稳定可靠。支持TCP、UDP、组播协议能针对当前服务器中不同的广播任务设置不同的广播传输方式…
阅读更多...
mac 快捷键

mac 快捷键

mac 程序坞 ctrlaltD:打开程序坞 调度中心 Ctrl键↑: 调度中心 Ctrl键↓:应用程序窗口 F11 : 显示桌面 输入法 Ctrl键空格: 切换输入法 Ctrl键Alt(Option)空格: 切换输入法 截屏 帮助 Ctrl键shift键/: 显示帮助
阅读更多...
24年教资报名千万不要卡在照片上，看看照片有啥要求？

24年教资报名千万不要卡在照片上，看看照片有啥要求？

每年都有很多人教资报名卡在照片上&#xff0c;总是审核不通过&#xff0c;24年教资报名千万不要卡在照片上&#xff0c;快来看看照片有啥要求吧&#xff1f;如果还没有准备&#xff0c;可以支付宝搜索【亿鸣证件照】或者微信搜索【随时照】小程序&#xff0c;然后进入小程序的…
阅读更多...
uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -用户投票实现

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -用户投票实现

锋哥原创的uniapp微信小程序投票系统实战&#xff1a; uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…
阅读更多...
Facebook算法背后的奥秘：个性化内容如何塑造你的新闻feed

Facebook算法背后的奥秘：个性化内容如何塑造你的新闻feed

Facebook&#xff0c;作为全球最大的社交媒体平台之一&#xff0c;其新闻feed承载着用户浏览内容的重要功能。然而&#xff0c;这一切并非偶然&#xff0c;背后隐藏着强大的算法系统。本文将深入探讨Facebook算法的奥秘&#xff0c;揭示个性化内容是如何在新闻feed中精准呈现的…
阅读更多...
主播风格的多样性

主播风格的多样性

主播风格是主播在直播过程中表现出来的一种个性特点&#xff0c;它可以影响观众的感知和互动体验。以下是常见的几种主播风格: 1.时尚型:这种风格的主播通常穿着时尚、前卫&#xff0c;以潮流、新颖的形象出现在观众面前&#xff0c;善于捕捉时尚元素&#xff0c;并能够将其融…
阅读更多...
2023年快要结束了，今年哪些计算机书值得推荐？

2023年快要结束了，今年哪些计算机书值得推荐？

2023年推荐新书有如下几本&#xff1a; 1、软件开发安全之道概念、设计与实施 软件安全设计和实施&#xff0c;覆盖安全概念、设计与实践&#xff0c;让您轻松应对各种威胁与挑战&#xff0c;帮助读者培养安全意识&#xff0c;全面了解软件开发安全之道。 2、C Templates&…
阅读更多...
2023年全国职业院校技能大赛（高职组）“云计算应用”赛项赛卷⑩

2023年全国职业院校技能大赛（高职组）“云计算应用”赛项赛卷⑩

2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷10 目录 需要竞赛软件包环境以及备赛资源可私信博主&#xff01;&#xff01;&#xff01; 2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷10 模块…
阅读更多...
力扣刷题--设计链表707

力扣刷题--设计链表707

这个题目的难点&#xff1a; 确定index是什么&#xff0c;index的范围向后遍历的次数&#xff0c;也就是循环的次数在某处添加或者删除一个结点&#xff0c;需要找到它的前一个结点 单链表 首先对于创建一个链表&#xff0c;需要单链表结构 public class ListNode {int val;…
阅读更多...
手持终端PDA定制厂家_5G安卓手持机设备/条形码扫描手持机PDA

手持终端PDA定制厂家_5G安卓手持机设备/条形码扫描手持机PDA

手持终端PDA是一种功能强大的手持终端设备&#xff0c;具备一维码和二维码扫描功能&#xff0c;广泛应用于门票管理、零售、智能巡检、仓储物资管理、金融、快递等领域。 这款手持终端基于MT6877方案&#xff0c;搭载八核处理器(2xCortex-A78 2.4GHz 6xCortex-A55 2.0GHz)&…
阅读更多...
【金猿案例展】首创证券——NoETL敏捷分析解决方案

【金猿案例展】首创证券——NoETL敏捷分析解决方案

‍ Aloudata 本项目案例由 Aloudata 投递并参与“数据猿年度金猿策划活动——2023大数据产业年度创新服务企业榜单/奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 党的十八大以来&#xff0c;党中央、国务院不断加大金融科技创新支持力度&#xff0c;扩大金融科…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站