Vue组件 [ 进阶版 ]

动态组件

目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件

步骤:

准备被切换的 - UserName.vue / UserInfo.vue 2个组件
引入到UseDynamic.vue注册
准备变量来承载要显示的"组件名"
设置挂载点<component>, 使用is属性来设置要显示哪个组件
点击按钮 – 修改comName变量里的"组件名"

最后将UseDynamic.vue导入app.vue中并注册使用就好了

下面看看源代码

//  UseDynamic.vue
<template>
  <div>
      <button @click="comName = 'UserName'">账号密码填写</button>
      <button @click="comName = 'UserInfo'">个人信息填写</button>

      <p>下面显示注册组件-动态切换:</p>
      <div style="border: 1px solid red;">
          <component :is="comName"></component>
      </div>
  </div>
</template>

<script>
// 目标: 动态组件 - 切换组件显示
// 场景: 同一个挂载点要切换 不同组件 显示
// 1. 创建要被切换的组件 - 标签+样式
// 2. 引入到要展示的vue文件内, 注册
// 3. 变量-承载要显示的组件名
// 4. 设置挂载点<component :is="变量"></component>
// 5. 点击按钮-切换comName的值为要显示的组件名
import UserName from './components/UserName.vue'
import UserInfo from './components/UserInfo.vue'
export default {
    data(){return {comName: "UserName"}},
    components: {
        UserName,
        UserInfo
    }
}
</script>

// UserName.vue
<template>
  <div>
      <span>用户名</span>
      <input type="text" name="" id=""><br>
      <span>密&emsp;码</span>
      <input type="password">
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

// UserInfo.vue
<template>
  <div>
      <span>人生格言</span>
      <input type="text" name="" id=""><br>
      <span>自我介绍</span>
      <input type="text">
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

组件缓存

目标: 组件切换会导致组件被频繁销毁和重新创建, 性能不高

使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁

<div style="border: 1px solid red;">
    <!-- Vue内置keep-alive组件, 把包起来的组件缓存起来 -->
    <keep-alive>
        <component :is="comName"></component>
    </keep-alive>
</div>

组件激活和非激活

目标: 被缓存的组件不再创建和销毁, 而是激活和非激活

补充2个钩子方法名:

activated – 激活时触发

deactivated – 失去激活状态触发

组件插槽

目标: 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容

下面看看源代码

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <Pannel>
          天王盖地虎
      </Pannel>
    </div>
  </div>
</template>

<script>
import Pannel from "./components/Pannel.vue"
export default {
  components: {
    Pannel
  },
};
</script>

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span class="btn" @click="isShow = !isShow">
        {
   
   { isShow ? "收起" : "展开" }}
      </span>
    </div>
    <slot></slot>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
          <p>寒雨连江夜入吴,</p>
          <p>平明送客楚山孤。</p>
          <p>洛阳亲友如相问，</p>
          <p>一片冰心在玉壶。</p>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
};
</script>

<style scoped>
h3 {
  text-align: center;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 1em;
}

.title h4 {
  line-height: 2;
  margin: 0;
}

.container {
  border: 1px solid #ccc;
  padding: 0 1em;
}

.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
}

img {
  width: 50%;
}
</style>

插槽默认内容

目标: 如果外面不给传, 想给个默认显示内容

口诀: <slot>夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用<slot>夹着的内容在原地显示

<slot>里面是啥显示啥<slot>

具名插槽

目标: 当一个组件内有2处以上需要外部传入标签的地方 v-slot可以简化成#使用

下面是源码 , 你们可以试试 , 然后自己在添加一些内容

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <Pannel>
        <template v-slot:title>
          <h4>芙蓉楼送辛渐</h4>
        </template>
        <template v-slot:content>
          <p>天王盖地虎</p>
        </template>
      </Pannel>
      <Pannel>
        <template #title>
          <span style="color: red;">我是标题</span>
        </template>
        <template #content>
          <p>小鸡炖蘑菇</p>
        </template>
      </Pannel>
    </div>
  </div>
</template>

<script>
import Pannel from "./components/Pannel.vue";
export default {
  components: {
    Pannel,
  },
};
</script>

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <slot name="title"></slot>
      <span class="btn" @click="isShow = !isShow">
        {
   
   { isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
     <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
};
</script>

<style scoped>
h3 {
  text-align: center;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 1em;
}

.title h4 {
  line-height: 2;
  margin: 0;
}

.container {
  border: 1px solid #ccc;
  padding: 0 1em;
}

.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
}

img {
  width: 50%;
}
</style>

作用域插槽

目标 : 使用插槽时 , 想使用子组件内变量

作用域插槽可以让组件更加灵活的适用于不同的场景和项目

口诀:

子组件, 在slot上绑定属性和子组件内的值
使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"
scope变量名自动绑定slot上所有属性和值 scope = {row: defaultObj}

下面是源代码

<template>
  <div>
    <Pannel>
      <template v-slot="view">
        <p v-for="(item, index) in view.data" :key="index">{
   
   { item }}</p>
      </template>
    </Pannel>
  </div>
</template>

<script>
import Pannel from "./components/HelloWorld.vue";
export default {
  components: {
    Pannel,
  },
};
</script>

<style></style>

<template>
  <div>
    <h1>子组件</h1>
    <slot :data="list"></slot>
  </div>
</template>

<script>
export default {
  data(){
    return{
      list:["独在异乡为异客","每逢佳节倍思亲","山有木兮木有枝","心悦君兮君不知"]
    }
  }
}
</script>

<style>

</style>

自定义指令

目标 : 获取标签 , 扩展额外的功能

在Vue内置指令满足不了需求时, 可以自己定义使用

全局注册 -- 语法

Vue.directive("指令名", {
  "inserted"(el) {
    //可以对ek标签扩展额外功能
  }
})

局部注册 -- 语法

directives:{
    "指令名字":{
      inserted(el){
        // 对el进行操作
      }
    }
}

看看例子使用的时候要v-指令名

//  main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//全局注册自定义   聚焦
Vue.directive("gfocus", {
  "inserted"(el) {
    el.focus()
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

// App.vue
<template>
  <div>
    <h1>自动聚焦</h1>
    <!-- 自动聚焦 自定义-->
    <input type="text" v-gfocus />
  </div>
</template>

<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令  v-指令名
export default {
  // 局部定义
  directives: {
    gfocus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style></style>

自定义指令-传值

目标: 使用自定义指令, 传入一个值

注意:

inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
update方法 - 指令对应数据/标签更新时, 此方法执行

点击改变文字颜色 ( 我写的是全局注册 , 你们可以试着用局部注册写写 )

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 目标: 自定义指令传值
Vue.directive('color', {
  inserted(el, binding) { // 当被绑定的元素插入到父元素中时调用
    el.style.color = binding.value
  },
  update(el, binding) {  // 值或模板更新是,触发此函数
    el.style.color = binding.value
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

// App.vue
<template>
  <div>
    <p v-color="colorStr" @click="changeColor">修改文字颜色</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colorStr: "pink",
    };
  },
  methods: {
    changeColor() {
      this.colorStr = 'skyblue';
    },
  },
};
</script>

<style></style>