Vue组件进阶，自定义命令

1.动态组件

多个组件使用同一个挂载点，并动态切换。就是实现多个组件的来回切换。

    //comName为一个变量，用来接收组件的名字
    <button @click="comName = 'UserInfo'">账号密码填写</button>
    <button @click="comName = 'UserName'">个人信息填写</button>

    <p>下面显示注册组件-动态切换:</p>
    <div style="border: 1px solid red">
      //component动态挂载点，is后面跟组件的名字，跟上变量就能实现切换
      <component :is="comName"></component>
    </div>

组件缓存

组件反复调用，会在生命周期中反复创建销毁，性能不高。要让他们缓存在内存中不被销毁。

用Vue内置的keep-alive组件 包起来要频繁切换的组件。

<div style="border: 1px solid red">
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>

组件插槽

把不确定的内容定义为插槽。还可以实现组件内容的分发。

组件内solt标签占位，把想要传入的内容，放在组件标签里。

<div class="container">

//当组件标签内没有传内容时，展示默认内容。
<slot>这里是默认内容</slot>
</div>

//组件
<Pannel>
   //要传入的内容
   <p>一片冰心在玉壶。</p>
</Pannel>

使用多个组件插槽时，可以给slot起名字，让传入的内容能正确匹配到slot。

<div class="container">

//当组件标签内没有传内容时，展示默认内容。
<slot name="str1111">这里是默认内容</slot>
<slot name="str2222">这里是默认内容</slot>
<slot name="str3333">这里是默认内容</slot>
</div>

//组件
<Pannel>
   //v-slot: 可以简化成#.   要与组件内的slot名字相同
   <template v-slot:str1111>
      <p>平明送客楚山孤。</p>
   </template>

   <template #str2222>
      <p>一片冰心在玉壶。</p>
   </template>

   <template #str3333>
      <p>洛阳亲友如相问，</p>
   </template>
</Pannel>

作用域插槽

子组件里值, 在给插槽赋值时在父组件环境下使用

//组件内 Obj为一个对象
 <div>
     <slot :row="Obj">{{ Obj.One }}</slot>
 </div>

父页面内
<Pannel>
   //scope变量名自动绑定slot上所有属性和值
   <template v-slot:scope>
     <p>{{ scope.row.one }}</p>
   </template>
</Pannel>

自定义指令

对普通 DOM 元素进行底层操作，这时候就会用到自定义指令.

扩展标签额外的功能

//使用。 v-命令的名字
<input type="text" v-focus>

//局部定义命令
directives: {
    focus: {
        inserted(el){
           el.focus()
         }
     }
 }


// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})

 

inserted渲染页面时使用，只能用一次，之后不可更改。   

update可以随着参数的改变而改变

使用自定变量，传入颜色
<p v-color="colorStr">这是一段话</p>
colorStr:  "red"

// 目标: 自定义指令传值
Vue.directive('color', {
  inserted(el, binding) {
    el.style.color = binding.value
  },
  update(el, binding) {
    el.style.color = binding.value
  }
})