组件

最新推荐文章于 2023-06-11 16:42:53 发布
最新推荐文章于 2023-06-11 16:42:53 发布
阅读量119 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LzhiZ/article/details/114888257
版权

组件的注册

在 vue 中，我们可以通过 new Vue 来创建一个组件，不过通常它是作为整个应用的顶层根组件存在的，我们还可以通过另外的方式来注册一个更为通用的组件

Vue.component()

Vue.component('组件名称', {组件选项})
  • 组件名称遵循自定义组件命名规范：全小写、连字符（虽然驼峰式一般也没问题）
  • 组件选项与 new Vue 选项配置基本一致（也有一些细节的不同）
全局组件与局部组件

通过 Vue.component 注册的组件，我们称为全局组件，因为它可以在任意范围内使用，我们还可以定义局部组件

new Vue({
  ...,
  components: {
  	'组件名称': {组件选项}	
	}
})

在一个组件内部通过 components 选项注册的组件是局部组件，只能在当前 components 选项所在的组件内部使用

注意：局部注册的组件只能中当前注册的组件中使用，不能在它的子组件中使用

data

在非 new Vue的组件中，data 必须为函数，函数返回值必须是一个对象，作为组件的最终 data

props

组件中内部私有数据存储中组件 data 中，通过外部传入的数据，则通过 props<选项接收

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <kkb-circle :r="n1"></kkb-circle>
        <hr />
        <kkb-circle :r="n2"></kkb-circle>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        
        let app = new Vue({
            el: '#app',
            data: {
                n1: 10,
                n2: 100
            },
            components: {
                'kkb-circle': {
                    props: ['r'],
                    data() {
                        return {pi: 3.14}
                    },
                    template: `<div>r: {{r}} -> {{pi * r * r}}</div>`
                }
            }
        });
    </script>
</body>
</html>
  • 如果传入的 props 值为一个表达式，则必须使用 v-bind
  • 组件中的 data 和 prop 数据都可以通过组件实例进行直接访问
  • data 中的 key 与 props 中的 key 不能冲突

组件通信

注意：不要修改 props 传入的数据

父组件通过 props 传入数据到子组件内部，但是子组件内部不要修改外部传入的 props，vue 提供了一种事件机制通知父级更新，父级中使用子组件的时候监听对应的事件绑定对应的处理函数即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>父组件：{{quantity}}</p>
        <kkb-child :quantity="initQuantity" @increment="appIncrement"></kkb-child>
        <kkb-child :quantity="initQuantity" @increment="appIncrement"></kkb-child>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const child = {
            props: ['quantity'],
            data() {
                return {
                    n: this.quantity
                };
            },
            template: `
                <div>
                    <p>子组件：{{n}}</p>
                    <button @click="increment">按钮</button>
                </div>
            `,
            methods: {
                increment() {
                    this.n++;
                    this.$emit('increment', this.n);
                }
            }
        };

        new Vue({
            el: '#app',
            data: {
                quantity: 0,
                initQuantity: 0
            },
            components: {
                'kkb-child': child
            },
            methods: {
                appIncrement(v) {
                    this.quantity++;
                }
            }
        });
    </script>
</body>
</html>
$emit()

vue 为每个组件对象提供了一个内置方法 $emit ，它等同于自定义事件中的 new Event,trigger 等

this.$emit('自定义事件名称', 事件数据)

  • 事件数据就是中触发事件的同时携带传递的数据 - event

  • 父级在使用该组件的过程中，可以通过 @事件名称 来注册绑定事件函数

  • 事件函数的第一个参数就是事件数据

组件双绑的实现

虽然并不推荐在组件内部修改 props ，但是，有的时候确实希望组件内部状态变化的时候改变 props ，我们可以通过子组件触发事件，父级监听事件来达到这个目的，不过过程会比较繁琐，vue 提供了一些操作来简化这个过程

v-model

v-model 是 vue 提供的一个用于实现数据双向绑定的指令，用来简化 props 到 data，data 到 props 的操作流程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .kkb-radio {
            width: 20px;
            height: 20px;
            background-color: #cccccc;
        }
        .kkb-radio.checked {
            background-color: #92beee;
        }
        .plane {
            border: 1px solid #000000;
            width: 300px;
        }
        .plane .header {
            width: 100%;
            height: 30px;
            background: #cccccc;
        }
        .plane .content {
            height: 100px;
            width: 100%;
            display: none;
        }
        .plane.expanded .content {
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <kkb-radio :checked="val"></kkb-radio> -->
        <kkb-radio v-model="val"></kkb-radio>

        <br /><br /><br />

        <kkb-plane :expanded="val"></kkb-plane>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        const kkbRadio = {
            model: {
                prop: 'checked',
                event: 'check'
            },
            props: ['checked'],
            data() {
                return {
                    status: this.checked
                }
            },
            template: `
                <div class="kkb-radio" :class="{'checked': status}" @click="changeStatus"></div>
            `,
            methods: {
                changeStatus() {
                    this.status = !this.status;

                    this.$emit('check', this.status);
                }
            }
        };
        const kkbPlane = {
            props: ['expanded'],
            template: `
                <div class="plane" :class="{'expanded': expanded}">
                    <div class="header"></div>
                    <div class="content"></div>
                </div>
            `
        };
        

        let vm = new Vue({
            el: '#app',
            data: {
                val: true
            },
            components: {
                'kkb-radio': kkbRadio,
                'kkb-plane': kkbPlane
            },
            methods: {
                
            }
        });
    </script>
</body>
</html>
model 选项

prop 指定要绑定的属性，默认是 value

event 指定要绑定触发的事件，默认是 input 事件

.sync

通过 v-model 来进行双向绑定，会给状态维护带来一定的问题，因为修改比较隐蔽，同时只能处理一个 prop 的绑定，我们还可以通过另外一种方式来达到这个目的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .kkb-radio {
            width: 50px;
            height: 50px;
            border: 5px solid #000000;
            background-color: #ffffff;
        }
        .kkb-radio.checked {
            border-color: green;
        }
        .kkb-radio.disabled {
            background-color: #cccccc;
        }
    </style>
</head>
<body>
    <div id="app">

        <p>val1: {{val1}}</p>
        <p>val2: {{val2}}</p>
        <hr>

        <kkb-radio :checked.sync="val1" :disabled.sync="val2"></kkb-radio>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        const kkbRadio = {
            props: ['checked', 'disabled'],
            data() {
                return {
                    status: this.checked,
                    dis: this.disabled
                }
            },
            template: `
                <div class="kkb-radio" :class="{'checked': status, 'disabled': dis}" @click="changeDis" @mouseover="setChecked" @mouseout="removeChecked"></div>
            `,
            methods: {
                setChecked() {
                    this.status = true;
                    this.$emit('update:checked', this.status);
                },
                removeChecked() {
                    this.status = false;
                    this.$emit('update:checked', this.status);
                },
                changeDis() {
                    this.dis = !this.dis;
                    this.$emit('update:disabled', this.dis);
                }
            }
        };

        let vm = new Vue({
            el: '#app',
            data: {
                val1: false,
                val2: false
            },
            components: {
                'kkb-radio': kkbRadio
            },
            methods: {
                
            }
        });
    </script>
</body>
</html>
update:[prop]

这里事件名称要使用 update 加上 prop 名称 的格式

是你来晚了.
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中.sync详解
weixin_44424820的博客
07-22 2110
白话理解：一个组件只能定义一个v-model，如果其他的prop也要实现双向数据绑定的效果，简单的方法就是：给子组件绑定一个自定义事件，父组件监听该事件，然后更新prop。但是这种方法又比较麻烦，官网解释：在有些情况下，我们可能需要对一个prop参数进行数据“双向数据绑定”。但是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且再父组件和子组件两侧都没有明显的变更来源。带有.sync修饰符的v-bind不能和表达式一起使用，只能传递你想绑定的属性名。就是被设计出来简化这种操作的。
Vue 父子组件通信v-model .sync修饰符
最新发布
modao的博客
07-19 857
v-model 是Vue框架的一种内置的API指令，本质是一种语法糖写法。
vue + ts 项目中ModelSync的用法
zxl1990_ok的博客
02-01 1695
要使vue支持ts写法，我们需要用到vue-property-decorator，这个组件完全依赖于vue-class-componet 首先安装： npm i -D vue-property-decorator @ModelSync(propName: string, event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) @ModelSync装饰器可接受三个参数: propName: string.
vue3组件通信之v-model篇
weixin_73368873的博客
06-11 2057
相信很多人对vue的v-model指令不陌生吧，在vue2的时候，v-model肩负着数据双向绑定的任务，到了Vue3之后，v-model也迎来了新的变化，即可以实现组件的通信。在某些场景下，使用v-model进行组件通信也是一个不错的方法。
v-model 和 .sync 的区别和实现
qq_42396813的博客
10-09 235
数据双向绑定v-model和.sync
组件图
02-03
概述组件图(ComponentDiagram)描述了软件的各种组件和它们之间的依赖关系。组件图中通常包含3种元素：组件(Component)、接口(Interface)和依赖(Dependency)。每个组件实现一些接口，并使用另一些接口。组件组件是...
Android组件设计思想
10-23
Android应用开发的哲学是把一切都看作是组件。把应用程序组件化的好处是降低模块间的耦合性，同时提高模块的复用性。Android的组件设计思想与传统的组件设计思想最大的区别在于，前者不依赖于进程。也就是说，进程...
服务器组件
11-01
服务器组件！asp网页发布组件及注册机！！！！！！！！！！！！！！！！！！！！！！！！！
QRCode二维码生成组件（珍藏版）
01-18
现在网上很多应用都是用二维码来分享网址或者其它的信息。尤其在移动领域，二维码更是有很大的应用场景。因为项目的需要，需要在网站中增加一个生成二维码分析网址的功能，在谷歌大幅度抽筋的情况下无奈使用百度。...
cobaltstrike 相关dll组件
08-14
cobaltstrike 相关dll组件
vue组件通信2 | 父子组件通信v-model
艾米栗的代码天地
10-16 5901
简要介绍了vue 下 v-model 的使用场景
组件封装v-model .sync在父子组件中实现双向数据绑定 如何处理单向数据流 封装表单组件
greed
04-16 347
父组件使用.sync进行数据的绑定 传值子组件时 把值赋值到data的变量中 然后监听该数据的变化 $emit抛出。// 当子组件绑定的值发生变化时 抛给父组件。// 父组件传递过来的值。// 子组件绑定的值。
vue使用model属性实现父子组件v-model双向绑定数据同步访问。
不想被卷出去的前端老鸟
06-21 4971
简单来说就是将父子组件实现数据双向绑定的效果。
vue子组件监听父组件数据变化并作出改变（亲测有效）
mrliucx的博客
03-01 1万+
vue子组件监听父组件数据变化并作出改变（亲测有效）
vue2+ts中ModelSync的使用
weixin_45664217的博客
08-17 264
<template> <div class="list_pioakl">组件内modelSync: {{ modelSyncA }}</div> </template> <script lang="ts"> import { Vue, Component, ModelSync } from 'vue-property-decorator'; // 原写法 @Component export default
Vue中v-model和sync的解析
qq_40566547的博客
12-22 1434
前言 Vue中v-model和sync一样都是实现双向绑定的语法糖，可以让开发者少些一些代码，两者编译后都会产生一个属性和一个事件，不过两者规则不大一样。 sync sync实现双向绑定主要用于子组件修改父组件的数据的一种便捷操作，常用于分页器等组件。要想使用sync，子组件需要有如下规则： 要想使用sync作为数据的双向绑定的修饰符，子组件必须向外抛出的时间满足规则：$emit(“update:{propName}”, {newValue})，其中propName是修改的prop名字，newValue是传
Vue中从v-model，model，.sync到双向数据传递，再到双向数据绑定
热门推荐
爪哇犀牛
09-14 1万+
前面的话 虽然v-model和.sync之间的区别，是非常明显的，但是通过这个去研究下去，就有点意思了。首先说明v-model是.sync的一种特殊情况，也就是当prop是value，vm.$emit('update:input')，这个时候就是传统意义上的v-model，也就是说v-model是model为prop等于value，event为input的特殊情况。 概念 双向数据传递 为...
vue的.sync和v-model的区别
qq_42975676的博客
06-01 515
//v-model和.sync <!--v-model是语法糖--> <Input v-model="username"> <!--默认等效于下⾯这⾏--> <Input :value="username" @input="username=$event"> // 但是你也可以通过设置model选项修改默认⾏为，Checkbox.vue { model: { prop: 'checked', event: 'change' } } // 上⾯这样设置会
v-model 和 .sync 的区别及使用方法
liumiao__的博客
05-05 1235
v-model 和 .sync 的区别及使用方法
openstack组件
07-15
OpenStack 是一个开源的云计算平台，由多个组件组成。以下是一些常见的 OpenStack 组件： 1. Nova：计算服务组件，负责管理和调度计算资源，包括创建、启动、停止和删除虚拟机实例。 2. Neutron：网络服务组件，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值