编程知识 cdmana.com

vue(杂记)

常见的修饰符及作用如下:

  • .stop:阻止事件冒泡,等价于调用 event.stopPropagation();
  • .prevent:阻止默认事件,等价于 event.preventDefault();
  • .capture:以捕获模式监听事件,即 addEventListener(event, fn, true);
  • .self:只有当 event.target 为自身时才出发,从内部元素冒泡出来时不触发;
  • .once:绑定后只触发一次。

还有按键修饰符,简化了我们对按键事件的处理。

  • keyCode:如 @keyup.13,即监听 keyCode 为 13(回车键)的按键抬起事件。
  • 别名:直接使用 keyCode 也比较麻烦,毕竟我们不会去记所有按键的 keyCode,这里给常见的按键提供了别名方便使用,如 @keyup.enter,常见的别名有:

    • .enter
    • .tab
    • .delete
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
  • 系统修饰键:修饰键与常规按键会有所不同,在和keyup事件一起用时,事件触发时修饰键必须处于按下状态。例如:@keyup.ctrl.enter,即为按住ctrl键,抬起enter键才会触发,单抬起ctrl不会被触发。Vue 总共包含以下四种系统修饰键:

    • .ctrl
    • .alt
    • .shift
    • .meta:Mac 系统键盘上,meta 对应 command 键(⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。

另外,修饰符支持叠加,且按顺序执行,例如:

  • @click.stop.prevent="doSth"即为阻止默认事件且阻止冒泡;
  • @keyup.ctrl.enter 即监听 ctrl+ 回车键释放事件;
  • @click.self.prevent仅阻止对元素自身的默认事件,而@click.prevent.self则会阻止所有的默认操作(后面的.self其实没有起作用)。
  • v-text:更新元素的textContent,与直接使用{{}}相比,可以避免 Vue 实例尚未作用于元素上,用户能直接看到{{ data }}这样的模板语法。
  • v-html:更新元素的innerHTML
  • v-pre: 跳过元素和其子元素的编译过程,加快编译速度,如<div v-pre>...</div>
  • v-cloak:保持该属性存在于元素上,直到关联的实例结束编译,常用于隐藏未编译的标签直到编译结束。例如:

v-once:只渲染元素和组件一次,随后即使触发重发渲染,该作用的元素或组件内的节点都将被视为静态内容,不会随之更新。

最早 Vue 在实现组件间通信的时候是采用派发(dispatch,事件向上冒泡,触发后停止冒泡)和广播(broadcast,事件向下传递给所有后代)的方式实现组件间通信。但这种方式在父子间通信时较为适用,但存在两个问题:

  • 兄弟组件间通信流程过长:兄弟组件间通信需要通过父组件中转。例如,兄弟组件 A、B,父组件 C,A 派发事件冒泡到 C,C 接受到后再次广播到 A、B,B 监听到后触发自己的事件,流程相对而言较长。
  • 通信流程依赖于 DOM 结构:派发和冒泡的流程都会依赖于组件间的结构,这样就形成了耦合,不利于组件的拆分。

所以在 Vue 2.0 后就取消了这种通信方式的支持,而推荐使用事件总线的方式,在简单场景下,可以使用一个空的 Vue 实例作为事件总线,例如:

`var bus = new Vue()

组件A:
bus.$emit('action', data)    // 触发action事件

组件B:
bus.$on('action', funtion (data) { ... }) // 监听action事件` 

复制

这样无论组件 A 在哪个位置,B 都能监听到 A 触发的 action 事件,与 DOM 结构就解耦了。在更加复杂的场景下,我们会使用状态管理: vuex 来进行开发~~~~

Vue.js 也提供了在父组件内渲染子组件数据的方法,那就是作用域插槽,通常会用在一些表格、列表类型的插件上,这样使用者就可以自定义渲染具体的每一项

// List.vue
<ul>
  <slot name="item" v-for="item in items" :item="item"></slot>
</ul> 

// ListDemo.vue
<list :items="items">
  <template slot-scope="props" slot="item">
    <li>{{ props.item.text }}</li> 
    // 渲染具体属性的控制权交由给了父组件
    // 在不改变子组件的情况下,我们可以根据父组件的情况,来渲染不同的属性,例如 props.item.value 之类
    // 这比在子组件间直接渲染提升了扩展性,但相对而言,子组件封装的能力也相对减弱了(并不负责渲染的逻辑,都需父组件完成)
  </template>
</list>

在父级中,需要使用具有slot-scope<template>标签,表示它是作用域插槽的模板。slot-scope的值将被用作一个临时变量名,此变量接收从子组件传递过来的prop对象。
<list :items="items"><li slot-scope="props" slot="item">{{ props.item }}</li></list>

1、如何理解Vue的作用域插槽
举个例子,比如我写了一个可以实现条纹相间的列表组件,发布后,使用者可以自定义每一行的内容或样式(普通的slot就可以完成这个工作)。而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数,具体看案例和注释。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue作用域插槽</title>
        <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
    </head>
    <body>
        <div id="app2">
            <!-- 组件使用者只需传递users数据即可 -->
            <my-stripe-list :items="users" odd-bgcolor="#D3DCE6" even-bgcolor="#E5E9F2">
                <!-- props对象接收来自子组件slot的$index参数 -->
                <template slot="cont" scope="props">
                    <span>{{users[props.$index].id}}</span>
                    <span>{{users[props.$index].name}}</span>
                    <span>{{users[props.$index].age}}</span>
                    <!-- 这里可以自定[编辑][删除]按钮的链接和样式 -->
                    <a :href="'#edit/id/'+users[props.$index].id">编辑</a>
                    <a :href="'#del/id/'+users[props.$index].id">删除</a>
                </template>
            </my-stripe-list>
        </div>
        <script> Vue.component('my-stripe-list', {
                /*slot的$index可以传递到父组件中*/
                template: `
                    <div>
                        <div v-for="(item, index) in items" style="line-height:2.2;" :style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor">
                            <slot name="cont" :$index="index"></slot>
                        </div>
                    </div>
                `,
                props: {
                    items: Array,
                    oddBgcolor: String,
                    evenBgcolor: String
                }
            });
            new Vue({
                el: '#app2',
                data: {
                    users: [
                        {id: 1, name: '张三', age: 20},
                        {id: 2, name: '李四', age: 22},
                        {id: 3, name: '王五', age: 27},
                        {id: 4, name: '张龙', age: 27},
                        {id: 5, name: '赵虎', age: 27}
                    ]
                }
            }); </script>
    </body>
</html>

版权声明
本文为[stray]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000038150349

Scroll to Top