- 综合排序
- 最热优先
- 最新优先
- 来自专栏我的博客
Vue自定义组件-动态组件
/button.vue' import btn2 from '. /but2.vue' export default { props: { title: { default: '标题' }, msg: { default: '按钮' }, /components/demo/list.vue' export default { name: 'list', components: { 'ex-list': myList } , methods: { test: function () { console.log('自定义') console.log('属性', this. console.log('beforeMount') }, // 组件写入dom结构之前 mounted: function () { // 组件写入dom结构了 console.log
1.4K20发布于 2019-12-11 - 来自专栏Web前端开发
Vue自定义组件
一、组件的创建 在 components 文件夹下新建一个组件 runoob.vue <template>
自定义组件</template> <script> export 三、组件的自定义属性 1、Prop 传属性值 prop 是父组件用来传递数据的一个自定义属性（通过 props 把数据传给子组件） components/runoob.vue 文件： <template >自定义组件<! （基于开发环境构建版本）会产生一个控制台的警告 四、组件的自定义事件 父组件使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件 1、$emit(eventName) 触发事件 components/runoob.vue 文件： <template>自定义组件1.2K10发布于 2019-08-23 - 来自专栏狮乐园
高级 Vue 组件模式 (8)
08 使用 Control Props 目标 在第七篇文章中，我们对 toggle 组件进行了重构，使父组件能够传入开关状态的初始值，同时还可以传入自定义的状态重置逻辑。 虽然父组件拥有了改变 toggle 组件内部状态的途径，但是如果进一步思考的话，父组件并没有绝对的控制权。在一些业务场景，我们期望父组件对于子组件的状态，拥有绝对的控制权。 实现 判定组件是否受控 由于 toggle 组件为一个智能组件，我们需要提供一个判定它是否受控的方式。 很简单，由目标中的第一点可知，当父组件传入了 on 属性后，toggle 处于被控制的状态，否则则没有，于是可以利用 Vue 组件的 computed 特性，声明一个 isOnControlled 计算属性 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-8 总结 关于 Controlled Component 和 Uncontrolled Component
88610发布于 2020-01-21 - 来自专栏vue的实战
vue的自定义组件
<template>
</template> <script> import Vue from "vue"; Vue.directive("blues", function(el, binding ) { /// blues就是组件的名称 // 把data中的color 通过binding来获得，同时el.style就是设置css属性 el.style = "color:" + binding.valuevue3。 090140发布于 2019-11-04 - 来自专栏飞鸟的专栏
vue 组件自定义事件
自定义事件概述自定义事件是一种允许组件之间进行事件传递和监听的机制。通过在组件中定义和触发自定义事件，我们可以实现组件之间的通信。组件可以发出自定义事件，其他组件可以监听这些事件并做出响应。 发送自定义事件要在组件中发送自定义事件，我们可以使用$emit方法。$emit方法接受两个参数：事件名称和要传递的数据。下面是一个示例，展示了如何在组件中发送自定义事件：// 子组件this. 监听自定义事件要在组件中监听自定义事件，我们可以使用v-on指令或@符号加上事件名称来绑定事件监听器。 /ChildComponent.vue';export default { components: { ChildComponent }, methods: { handleEvent 示例下面是一个完整的示例，展示了如何在Vue组件中使用自定义事件：<template>
Parent Component
<child-component @1K00编辑于 2023-05-21来自专栏日常记录vue自定义日历组件
代码地址 https://github.com/nan1010082085/vue-components/tree/master/CustomCalendar 享一下组件目录 ? tip: 组件功能： 展示当前年份当前月， 支持左右 icon自定义 支持自定义当前日提示边框颜色 支持自定义某一日选择背景颜色， 边框染色如已经自定义边框颜色则为自定义颜色 某一日选中采用圆点模式 使用 组件中使用 默认 ? 自定义左侧icon ![在这里插入图片描述](https://img-blog.csdnimg.cn/2019030120084725.png ? ps: 自定义某一日 数据传递 [ { active : 1 } ] 数组对象， 其中必须有 key = active, value ：Number // 为组件判断某一日选中参数 默认效果 ?
2.4K10发布于 2019-03-28来自专栏强仔仔自定义vue日历组件
今天给大家介绍一下，如何在vue中实现自定义日历组件，功能类似FullCalendar插件，但是却比较灵活。 例如我用日历来体现每天价格 下面来具体介绍一下是怎么实现这个过程的，这次重点讲这个组件的实现过程，涉及其它的先暂时不讲，有疑问的可以找我私聊。 '#1D8CE0' : '#8492A6'}">
{{$t('calendar.price')}}：{{scope.row[item.en].info.price eef1f6; font-weight: bold; } p { margin: 0; padding: 0; } </style> 具体代码就是上面所示，该日历组件还实现了中英文切换的功能
1.7K40编辑于 2022-05-06来自专栏前端知识分享Vue---自定义组件
在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is 特性进行了扩展的原生 HTML 元素。 二、自定义组件 1、全局组件 注册全局组件：可以使用可以使用 Vue.component(tagName, options) 1 Vue.component('my-component', { 2 // 选项 3 }) 组件在注册之后，便可以作为自定义元素 在一个实例的模板中使用。 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-<em>8</em>"> 5 <title>Vue 测试实例 - 全局组件</title> 6 <script template: '
自定义组件!
1.2K20发布于 2018-10-10来自专栏达达前端Vue组件的操作-自定义组件，动态组件，递归组件
： <input type="text" value="value" @input = "handleinput($event.target.value)"> 自定义组件，父组件的input事件需要通过 $emit('input, value'); }
自定义组件双向绑定 <my-component v-model="dashucoding"> </my-component> v-model $emit('input',val); } } }; // 创建vue实例对象 const app = new Vue({ el: '#app', data: { name: '' }, const C1Component = { template: '#c1' }; const C2Component = { template: '#c2' }; // vue实例对象 const app = new Vue({ el: '#app', data: { currentComponent: 'C1Component' }, components: { C1Component2.6K20发布于 2019-12-20来自专栏全栈程序员必看vue自定义组件封装_vue组件的双向绑定实现
封装组件的v-model 再看组件的时候，不如elementui等等，我们时常看到它们的组件都是直接通过v-model双向绑定的，而不是通过我们常用的属性(prop)传递过去,子组件修改通过$emit, 或者通过vuex等等来返回父组件，这样的方法也不是说不行，但是总感觉没有elementui那样的写法高级。 所以我们也来简单的封装一个看起来高级一点点的组件。 image-video-upload { display: flex; .uploader, .result-image { display: flex; font-size: 28px; color: #8c939d display: flex; justify-content: center; align-items: center; &:focus{ border-color: #fbfdff; color: #8c939d
1.6K30编辑于 2022-11-09来自专栏前端开发随笔Vue函数调用自定义组件
无需导入vue文件，一段js调用自定义组件 components文件夹新建loading文件夹 在里面存放index.js和index.vue index.vue <template> <transition from 'vue' import Loading from '. /index.vue' const constructor = Vue.extend(Loading) const instance = new constructor() instance. $el) export default instance main.js进行全局导入 import loading from "@/components/loading"; Vue.prototype $loading = loading; vue文件使用 this.$loading.show("数据加载中") setTimeout(() => { this.
99810发布于 2021-01-29来自专栏我的博客Vue自定义组件-属性使用
自定义组件Button <template> <button> {{ msg }} </button> </template> <script> export default { props: { msg: { default: '下载' } } } </script> 组件使用 <template>
</ex-btn> <ex-btn msg="按钮"></ex-btn></template> <script> // 引入自定义组件 import btn from '@/components/demo/button.vue' export default { name: 'myButton', components: {1K10发布于 2019-12-11来自专栏前端技术分享Vue - 自定义组件双向绑定
很肯定的说，没有用组件化开发的Vue项目是没有灵魂的。所以如何封装一个优雅且复用性高的组件成为我们必需的技能。 Tab自定义组件 首先来看一个Tab组件的实现，看看它存在什么问题，哪里可以改进？ 例如，在父组件中有多个子组件依赖同一个属性，其中一个子组件更新该属性，会引发其余子组件发生改变，发生问题时不容易被找到，因此Vue不推荐我们这样做。 单向数据流: https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5% 81 正解：model选项 改进组件 组件model选项 允许一个自定义组件在使用 v-model 时定制 prop 和 event。 <Tabs :tabs="tabs" v-model="activeName" /> 总结 使用组件的model选项实现自定义组件双向绑定，在组件内部通过事件更新属性值，这样的自定义组件使用起来更优雅。
1.3K20发布于 2020-08-24来自专栏全栈开发日记Vue组件的自定义事件
一种组件间通信的方式，适用于子组件==>父组件 01 - 基本使用 click,keyup,mouseover等都属于原生js事件，自定义事件指事件名称为自定义。 给谁绑的事件找谁触发。 通过在父组件中给子组件绑定自定义事件实现（事件的回调在父组件中）：子组件给父组件传递数据，不再需要父组件给子组件传递函数类型的props。 02 - 绑定自定义事件 父组件： 给子组件绑定自定义事件，两种写法 ： 一种使用@（v-on:）直接给子组件标签绑定，另一种通过给子组件添加ref属性，在mounted中获取组件实例，调用$on() $off('自定义事件名') 解绑多个自定义事件（注意写数组形式）：this.off(['自定义事件名','自定义事件名2'])或者不传参this.off()时，会解绑该组件身上所有的自定义事件 组件实例被销毁时 ，该组件身上的所有自定义事件也被销毁 04 - 注意点 1.谁触发的组件自定义事件，该事件回调函数当中的this就是谁 2.组件实例想用原生DOM事件需要加事件修饰符.native（原生的，本来的） 3
2K20编辑于 2022-05-13来自专栏痴心阿文的专栏uniapp基于vue自定义组件
✅作者简介： 五一假期结束了，我是痴心阿文，你们的学友哥，今天给大家分享uniapp基于vue自定义组件！ 个人主页：痴心阿文的博客_CSDN博客-TypeScript.js,笔记,CSS领域博主 本文前言：uniapp基于vue自定义组件 如果觉得博主的文章有帮到你的话，请支持一下博主哦 本文主要介绍vue自定义组件 步骤顺序如下： 1.在项目中创建目录：components 2.新建组件.vue 文件 例如：privacy.vue, 同时新建同名文件夹 3.组件文档结构 创建组件 // javasecrpt 部分 export default{ name:"privacy",//组件名称 data(){ return{ } }, methods:{ }, components: { privacy, //注册自定义组件
56930编辑于 2022-11-21来自专栏我的博客Vue自定义组件-事件使用
-- 组件 --> <template> <button @click="btnClickEvent"> <! methods: { btnClickEvent: function () { // 执行统一事件 console.log(this.msg) // 触发父组件自定义事件 $emit('myClick') } } } </script> 组件使用 <template>
<ex-btn v-on:myClick /components/demo/button.vue' export default { name: 'myButton', components: { 'ex-btn': btn68210发布于 2019-12-11来自专栏前端文章小tipsVue 8种组件通信方式
vue是数据驱动视图更新的框架，所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？ 非父子组件之间通信(兄弟组件、隔代关系组件等) 本文会介绍组件间通信的8种方式如下图目录所示:并介绍在不同的场景下如何选择有效方式实现的组件间通信方式，希望可以帮助小伙伴们更好理解组件间的通信。 父组件向子组件传值 下面通过一个例子说明父组件如何向子组件传递数据：在子组件article.vue中如何获取父组件section.vue中的数据articles:['红楼梦', '西游记','三国演义' 子组件向父组件传值 对于$emit 我自己的理解是这样的: $emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v- on监听并接收参数。 假设有三个组件: A.vue、B.vue、C.vue 其中 C是B的子组件，B是A的子组件 // A.vue <template>
<comB></comB> </div1.2K40发布于 2021-11-23来自专栏hml_知识记录vue 自定义全局、局部组件
vue自定义组件分为局部组件和全局组件 全局组件 全局组件格式 template 是模板 props 是自定义组件用到的属性 可以是对象也可以是数组 组件的名称通常用 - 来连接，也可以像这个用大驼峰命名 每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他选项它都有。 ---- 局部组件在vue 实例中 components：{} 中创建 创造的规则跟全局创建时一样的， 局部创建只能在当前实例使用 在使用组件时，在组件行类 的属性前面要加上： ---- 创建一个局部组件 在vue实例中 data 可以是对象，也可以是一个方法， 但是在组件中，data只能是一个方法data，由该方法返回一个对象 因为组件可能会使用很多次，如果data选项是对象的话，会导致多个组件使用了同一份数据 $emit（）自定义一个synccount 方法，方法名随意， 在组件z-counter中 用@synccount=""的格式写个方法来接收数据，如果需要接收多个参数，和默认参数 需要在方法的参数最后面加入
83820编辑于 2022-03-05来自专栏web秀VUE路由拦截：Vue自定义全局弹窗组件
抛出前后端混合开发外，vue可以轻松的实现路由拦截。 Vue自定义全局弹窗组件 有了路由拦截，我们来撸一个全局弹窗组件login.vue <template>
/index.styl'; </style> index.js import Vue from 'vue' import login from '. /components/login"; Vue.prototype.$login = login.install; 后续，我们在vue页面可以直接使用this.$login()，调起登录弹框。 /views/order.vue") } ] ...4.1K20发布于 2019-12-06来自专栏盛开在夏天的太阳8.Vue组件三---slot插槽
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <title>Title</title> </head> <body DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <title>Title</title> </head> <body DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <title>Title</title> </head> <body 对象, 在父组件中定义一个变脸isShow为true, 在子组件中定一个一个变量isShow:false. const app = new Vue({ el: "#app", 六. slot的作用域 首先, 我们创建一个Vue实例, 然后在Vue的data中定义一个books, 在组件中定义一个books 然后, 在模板中定义一个插槽, 遍历books.
1.2K10发布于 2021-03-04腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号