vue使用技巧

墨蓝 2022-12-13 04:05 84阅读 0赞

> #### 透传 ####

1.  透传props

<child-component v-bind="$props"></child-component>

1.  透传attrs

<child-component v-bind="$attrs"></child-component>

1.  透传object

<child-component v-bind="obj"></child-component>

1.  透传事件

<child-component v-on="$listeners"></child-component>

> #### 动态指令、动态绑定 ####

<template>
      ...
      <my-button :[someProp]="something" @[someEvent]="handleSomeEvent()"/>
      ...
    </template>
    
    <script>
      ...
      data(){ 
        return{ 
          ...
          someProp: 'p',
          something: 't',
          someEvent: someCondition ? "click" : "dblclick"
        }
      },
    
      methods:{ 
        handleSomeEvent(){ 
          // do something
        }
      }
      ...
    </script>

> #### hookEvent ####

监听子组件或自身组件的生命周期

vm.$on('hooks:created', cb)

监听自身生命周期常用于需要分别在mounted中创建在beforeDestroy中销毁的时候，原来的方式不利于阅读，使用hookEvent可以优化阅读

// 修改前
    mounted () { 
    	window.addEventListener('resize', func)
    },
    beforeDestroy () { 
    	window.removeEventListener('resize', func)
    }
    
    // 修改后
    mounted () { 
    	window.addEventListener('resize', func)
    	this.$once('hook:beforeDestroy', () => { 
    		window.removeEventListener('resize', func)
    	})
    }

> #### CSS scoded 和深度作用选择器 ####

scoded属性可以实现将样式隔离，但是有时候需要修改子组件的公共样式，以前都是新加一个style标签，现在可以使用深度作用选择器（/deep/ 或 >>>（这种方式在样式预编译器中可能报错）），这样既隔离了样式，又能修改公共样式。

.a /deep/ .b{ }
    
    // 编译后 .a[data-xxx] .b{ }

> #### JSX ####

[相关规则][Link 1]

> #### v-cloak ####

由于有时候vue实例未创建时页面就渲染了，会导致页面闪烁，解决办法是给vue实例的根dom添加v-cloak属性

<div id="app" v-cloak></div>
    
    // css 中
    [v-cloak] {
        display: none;
    }

> #### v-once和v-pre ####

v-pre表示该标签及其子标签为静态内容，跳过编译。v-once表示该标签及其子标签只编译一次，后面都做静态内容渲染。

<span v-pre>{
       { this will not be compiled }}</span>   显示的是{
       { this will not be compiled }}
    <span v-once>This will never change: {
       {msg}}</span>

> #### $event ####

有时候，绑定一个事件时需要传入其它参数，可是会导致事件自带的参数丢失，这时可以用`$event`解决。  
当绑定的事件是原生事件时，`$event`表示事件的event对象。当绑定的事件时自定义事件时，`$event`表示原生事件传递的**第一个**参数。

> #### 覆写组件库里的组件的方法 ####

import {  Input } from 'element'
    
    export default { 
    	components: { 
    		'el-input': { 
    			mixins: [Input],
    			methods: { }
    		}
    	}
    }

[Link 1]: https://github.com/vuejs/babel-plugin-transform-vue-jsx