Vue自定义指令，ref ，sync，slot

一.自定义指令

vue中可以自己设置指令，通过directive来实现，有2种创建方式，一种是局部创建，一种是全局创建。

第一种：局部创建

如果想注册局部指令，组件中也接受一个 directives 的选项：

然后就可以在模板中任何元素上使用新的 v-focus 和v-book属性。

第二种创建方式：全局创建

二.Vue中的特殊特性ref

ref被用来给元素或子组件注册引用信息

1、ref 放到Dom当中，this.$refs会视为一个DOM元素。如果多个DOM同时绑定一个ref.最终只会使用最后一个。

2.如果你的ref与v-for结合使用，那么通过refs得到的会是一个数组。

3，如果ref放在组件中，通过ref就可以得到那个组件。

三. sync

　　语法糖 .sync

　　完成了2个作用（1）向下传递属性

　　　　　　　　（2）子组件可以通过$emit("update:isshow",传递参数)来修改父级通过isshow绑定的值

　　　　　　　　　　　说明：相当于在组件增加了 @update:isshow="()=>isShow= !isShow"

四.插槽slot

　　1，匿名插槽（单个插槽）:将组件标签包含的内容放到时组件模板当中的匿名slot标签内。slot是一个占位符

　　2，具名插槽:给子组slot增加一name属性

　　3，作用域插槽:在子组件当中的slot标签当中所有的属性（除name属性外），都可以通过 slot-scope来获得　

　　　　<div slot="one" slot-scope="scope">你好！我是刘德华{{scope.username}}{{scope}}

原文地址：https://www.cnblogs.com/aixuexi-504682107/p/10738806.html

时间： 2024-07-30 20:25:41

Vue自定义指令，ref ，sync，slot的相关文章

vue自定义指令(Directive中的clickoutside.js)的理解

.array p { counter-increment: longen; margin-left: 10px } .array p::before { content: counter(longen) "." } .alink { font-size: 16px; color: blue } 阅读目录 vue自定义指令clickoutside.js的理解回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令一般在需要 DO

vue自定义指令

什么是指令? 指令 (Directives) 是带有 v- 前缀的特殊属性. 它可以写在DOM元素上,对html进行操作.常用的指令比如有:v-if,v-else,v-show,v-for等.这些都是官方直接给定的,另外Vue也允许注册自定义指令,有时这很有用. 自定义指令方法自定义一个指令很简单,官网给出一个简单的例子,自定义一个聚焦指令v-focus: // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中

vue自定义指令clickoutside使用以及扩展用法

vue自定义指令clickoutside使用以及扩展用法产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如要求选择器的弹出框中,增加搜索过滤(跟目前element的输入建议不太一样).于是想说说之前修改element组件,并定制为业务组件过程中遇到的问题. ps:因为对某些组件改动很大,所以是直接拷贝了一份源码,然后再进行修改,但是这样会遇到挺多问题,建议对于vue组件如果改动不大,只是简单功能扩展,就

使用vue自定义指令合并iview表格单元格

使用vue自定义指令合并iview表格单元格, 我们在开发过程中发现iview表格组件,官网只提供了合并表头的demo,并没有合并表格中的单元格. ivew表头分组:https://www.iviewui.com/components/table#BTFZ 效果图如下: 具体实现思路,通过vue自定义属性来操作dom,达到我们想要的效果: 代码如下: demo.vue 表格页面 <template> <div class="demo"><Table :c

Vue自定义指令获取DOM元素

我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export default { data(){ return{ msg : 'oldMsg' } } methods : { changeMsg : function(){ this.msg = 'newMsg' } } } 当调用了changeMsg方法,msg被修改为 ' newMsg ' ,我们可以把这次修改理解为数据

Vue 自定义指令练习

Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象取值: <div v-demo="{ color: 'white', text: 'hello!' }"></div> Vue.directive("demo", function (el, binding) { alert(binding.value.color); alert(binding.value.text); })

vue 自定义指令

除了默认设置的核心指令(v-model和v-show),vue也允许注册自定义指令.在vue2.0版本中,代码复用的主要形式和抽象是组件--然而,有的情况下,你仍然需要对DOM元素进行底层操作,这时候就会用到自定义指令. 当页面加载时,元素将获得焦点(注意:autoFocus在移动版safari中不工作),事实上,你访问后,还没点击任何内容,input就获得了焦点.现在让我们完善这个指令: // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑

vue 自定义指令directive

//自定义指令:directive 的传参--可以数据也可以是字符串 Vue.directive('scroll', function (binding) { window.addEventListener('scroll', function () { if (document.body.scrollTop + window.innerHeight >= document.body.clientHeight-20) { var fnc = binding; fnc(); } }) }); 调用

vue自定义指令的创建和使用

一.自定义指令的创建和使用 Vue自带的指令很多,v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...但是这些指令都是比较偏向于工具化,有些时候在实现具体的业务逻辑的时候,发现不够用,如何来自定义指令. 1.自定义指令①创建 new Vue({ directives:{ change:{ bind:function(){}, update:function(){}, unbind:function(){}