Vue 的插槽都在这里了

本文已参与 「新人创作礼」活动, 一起开启掘金创作之路。

22- vue component 动态组件的使用

1. 引入组件; 注册组件
2. 使用组件: 它是一个创建和销毁的过程

<button @click="comName = 'UserName'">密码</button>
  <button @click="comName = 'UserInfo'">用户名</button>

  <p>下面显示注册组件:</p>
  <div style="border: 1px solid red">
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>

  data() {
  return {
    // 定义一下, 上面事件修改
    comName: "UserName",
  };
},

22- vue component(keep-alive) 动态组件的使用 taipu 栏的切换

1. 不会使得组件销毁两个各有各的引用场景
2. 会生成两个钩子: 激活: activated; 失活: deactivated

```html

<button @click="comName = 'UserName'">密码 <button @click="comName = 'UserInfo'">用户名

<p>下面显示注册组件:</p>
<div style="border: 1px solid red">
  <!-- vue内置的组件component, 可以动态显示组件 -->
  <keep-alive>
    <component :is="comName"></component>
  </keep-alive>
</div>

```js
<script>
import UserName from "./components/UserName.vue";
import UserInfo from "./components/UserInfo.vue";
export default {
props: {

},
data() {
  return {
    comName: "UserName",
  };
},
components: {
  UserName,
  UserInfo,
},
};
</script>
  activated() {console.log('用户名组件激活');},
  deactivated() {console.log('组件失火');},

3. 指定缓存: include 添加属性: 可以指定组件是否缓存

      <keep-alive :include="['UserName','UserInfo']"> // 两种写法
      <keep-alive include="UserName,UserInfo"> // 二种
        <component :is="comName"></component>
      </keep-alive>

23- vue slot 插槽的使用

1. 初级插槽: 在子组件添加一个 标签然后在父组件的标签里边添加内容: 示例

    <login>
    <p>我是爸爸</p>
    <!-- <template #name>
      <h3>太郎丸</h3>
    </template>
    <template #username>
      <h1>托马</h1>
    </template> -->
  </login>

2. 中级插槽具名插槽: 父组件:

```html

  <login>
  <p>我是爸爸</p>
  <template #name>
    <h3>太郎丸</h3>
  </template>
  <template #username>
    <h1>托马</h1>
  </template>
</login>

子组件: 

```html

  <div>
      <h1>我是大儿子</h1>
    <slot>
      
    </slot>
    <slot name="username">
      默认内容 小黄
    </slot>
    <slot name="name">
      默认内容 小白
    </slot>
  </div>

3. 高级插槽(作用域插槽) 使用: 子组件的 slot 标签传值; 父组件 #name="scope" 接收然后使用

<template>
  <div>
      <h1>子组件</h1>
      <slot name="age" :a="list">

      </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
        list:[
            {id:1,username:'小白',age:14},
            {id:2,username:'小黄',age:16}
        ]
    };
  },
};
</script>

<template>
  <div id="container">
    <h1>父组件</h1>
   <Pannel>
     <!-- <template #age="a:scope"> -->
       <!-- 这里 #age="scope" 的 scope 数据接收就是: { "a": [ { "id": 1, "username": "小白", "age": 14 }, { "id": 2, "username": "小黄", "age": 16 } ] } -->
     <template #age="{a:scope}">
       <!-- 我们可以把它解构出来: [ { "id": 1, "username": "小白", "age": 14 }, { "id": 2, "username": "小黄", "age": 16 } ] 就变成了好处理的数据 -->
       {{scope}}
       <!-- 我们可以利用这个数据做其他的事情 -->
       <div v-for="item in scope" :key="item.id" class="inde">
         <p>{{item.username}}</p>
         <p>{{item.age}}</p>
       </div>
     </template>
   </Pannel>
  </div>
</template>

23- vue 自定义指令

1. 自定义指令获取焦点

<template>
  <div>
    来玩玩嘛小弟弟: <input v-login type="text">
  </div>
</template>

<script>
export default {
  name: 'VueLoginApp',
  directives: {
    // 自定义的指令名随意
    login: {
      // el 参数就是获取的标签
      inserted(el) {
        // 然后根据标签定制属性
        console.log(el);
        console.dir(el);
        el.focus()
      }
    }
  },
}

Vue props 的规范

  props: {
  'abc': {
    required:true,
    // 默认值: 基本数据类型, 直接写
    default:'默认值'
  },
  list: {
    type:Array,
    // 引用数据类型要写函数 return
    default: () => []
  },
  status: {
    // 当属性传入, validator 会自动执行, 接收参数
    // 如果 validator 函数返回 true, 表示校验通过
    validator: function (value) {
      console.log(value);
      // 这个值必须匹配下列字符串的一个
      return ['','',''],indexOf(value) !== -1
    }
  }
},