- 综合排序
- 最热优先
- 最新优先
- 来自专栏我的博客
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 组件模式 (6)
06 通过 Directive 增强组件内容 目标 之前的五篇文章中，switch 组件一直是被视为内部组件存在的，细心的读者应该会发现，这个组件除了帮我们提供开关的交互以外，还会根据当前 toggle 我们期望能够显示地声明当前的元素是一个 toggler 职能的组件或者元素，这个组件或者元素，可以根据当前 toggle 组件的开关状态，动态地更新它本身的 aria-expanded 属性，以便针对无障碍访问提供适配 Note: 这里关于指令的引入，使用的函数简写的方式，会在指令的 bind 和 update 钩子函数中触发相同的逻辑，vue 中的指令包含 5 个不同的钩子函数，这里就不赘述了，不熟悉的读者可以通过阅读官方文档来了解 为了尽可能地使指令保证灵活性，我们期望可以自定义无障碍属性 aria 的后缀名称，比如叫做 aria-on，这里我们可以通过 arg 这个参数轻松实现，改版如下： export default function 成果 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-6 总结 关于指令的概念，我自身还是在 angularjs 中第一次见到，当时其实不兴组件化开发这个概念
75220发布于 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 $t('calendar.friday'), checked: false, checkedNum: 0, checkedLen: 0 }, { id: '6', en: 'six' 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-8"> 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那样的写法高级。 所以我们也来简单的封装一个看起来高级一点点的组件。 #8c939d; text-align: center; background-color: #fbfdff; border: 1px dashed #c0ccda; border-radius: 6px center; margin-left: 20px; margin-top: 0; } .upload-success { position: relative; border-radius: 6px
1.6K30编辑于 2022-11-09来自专栏盛开在夏天的太阳6. vue组件详解(一)
组件的基本使用 2. 全局组件和局部组件 3. 父组件和子组件 4. 组件语法糖的写法 5. 组件data关联的写法 6. 创建组件构造器对象 /** * 调用vue.extend()创建一个组件 * 传入的template代表我们自定义组件的模板 * vue2 , 但是注册的时候, 只注册到了app这个Vue对象里, 那么就只有app能使用,其他vue对象不能使用, 这样的组件就是局部组件. 子传父自定义事件 父传子使用的是定义属性接收, 而子传父使用的是定义事件的方式. 就使用上面的例子, 点击类型传参给父对象. 通常我们都是监听点击事件click, 按键事件input等自带事件, 这里需要监听的是自定义事件
<comp1 @itemclick="itemClick1.8K20发布于 2021-03-04来自专栏我的博客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函数调用自定义组件
无需导入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组件的自定义事件
一种组件间通信的方式，适用于子组件==>父组件 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来自专栏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来自专栏云前端复用 Vue 组件的 6 层手段
原文：https://michaelnthiessen.com/6-levels-of-reusability/? 以组件而言，我们希望它能被不止一次地复用。 一些组件仅需基本的复用性。 另一些则需要更复杂的技术以充分利用。 我认为复用性有 6 中不同的层级，这里大体上来看一下： 1. 在 Vue 中，使用 scoped slot (作用域插槽) 就可以达到目的，为组件增加更多的灵活性了。 （译注 - 官网上的例子）： <! 扩展 使用 Vue 中的 named slots (具名组件) 可以在组件中添加一个或多个扩展点。再结合上述的适配和反转，就具备了最大化组件复用性的必要技术。 总结 本文列出了复用 Vue 组件的 6 层手段。这说不上是全部，或许还有其它手段，但已经足够实用了。
48030发布于 2020-07-02腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号