Vue 动态组件 & 插槽 & 自定义指令&ESLint等插件配置

• 动态组件 component

 <component :is='comName'></component>

data() {

    return {

      comName: 'Left'

    }

• 防止动态组件被销毁，使用keep-alive保持状态

<keep-alive include='Left,Right'>
      <component :is='comName'></component>
</keep-alive>

• 当组件被缓存的时候，会自动激活deactivated生命周期

• 当组件被激活的时候，会自动激活activated生命周期

• include属性，指定哪些组件可以被缓存

• exclude属性，指定哪些组件不会被缓存

• include和exclude不可同时使用

• 通常通过name属性给组件命名

• 插槽slot

  1. 具名插槽：v-slot:name   只能用于template或自定义组件标签中,简写为"#name"

  2. 作用域插槽：封装组件时为预留的插槽slot 提供属性对应的值，叫做作用域插槽

     <slot name="content" msg="hellow vue.js" :user="userinfo"></slot>

• 自定义指令

1. 私有自定义指令：在每个vue组件中的directive节点中声明

    directives: {
       color: {
         // bind()第一次被绑定到元素时被调用，触发一次
         bind(el,binding) {
           // el.style.color = 'red'
           el.style.color = binding.value
         },
         // 每次触发dom更新时被调用
         update(el, binding) {
           
           el.style.color = binding.value
         }
   
     }

    <h1 v-color>App 根组件</h1>

           函数简写：bind（）和update()，逻辑和参数都一样，可以简写

   directives:{
   color(el, binding) {
         el.style.color=binding.value
       }
   }

• ESLint等插件配置

// prettier插件配置
  "prettier.trailingComma": "none",
  "prettier.semi": false,
  "prettier.printWidth": 300,
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",
  // 设置.vue文件中，html代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    "wrap_attributes": "false"
  },
  "prettyhtml": {
    "printWidth": 100,
    "singleQuote": true,
    "wrapAttributes": false,
    "sortAttributes": false,
    "arrowParens":"avoid",
    "trailingComma":"none",
    "semi":false,

  }
},
  // ESlINT 插件的配置
  "eslint.codeActionsOnSave": {
    "source.fixAll": true,
  },

//P171中的配置
//创建.prettierrc文件的内容：
//"prettier.configPath":"c:\\Users\\用户名\\.prettierrc
{
    "semi": false,
    "singleQuote": true,
    "bracketSpacing": true
}