Vue组件插槽&组件补充

组件插槽

这篇总结主要介绍Vue组件插槽&组件相关的补充

1.匿名插槽

插槽作用 : 父组件 传递html结构 给子组件
插槽语法：

/*1.传：父组件
	<子组件>   html结构   </子组件>
2.收：子组件
	<slot> 默认结构 </slot>*/

2.具名插槽

具名插槽作用: 父组件 传递多个位置html结构 给子组件
具名插槽语法：

/*1.父组件传
<子组件>  
     <template v-slot:插槽名> 
             html结构 
     </template>
</子组件>

2.子组件收
<slot name="插槽名"> 默认结构 <slot>
v-slot指令只能用于 template 标签
v-slot:插槽名    简写成   #           */

3.作用域插槽

作用域插槽作用： 子组件 传递 数据 给 父组件 的 插槽 使用
作用域插槽语法：

/*1.传： 子组件
	<slot 属性名="属性值"> 默认结构 </slot>
2.收 ： 父组件
<子组件>  
     <template v-slot="对象"> 
             html结构 
     </template>
</子组件>*/

组件补充

1.组件使用 v-model

本质是 语法糖

/*1.父传子 props传递 :value
2.子传父 $emit传递 @input*/

2. ref 使用

作用： 获取 DOM元素 + 子组件实例
语法：

/*(1)声明ref:    <标签 ref="属性名"></标签>
(2)使用ref:   this.$refs.属性名*/

注意点:

/*1.给原生标签使用ref :  获取的是dom对象
2.给自定义标签(组件)使用ref:  获取的是vm实例
3.应用：在父组件中调用子组件的方法*/

3.nextTick

作用 ： 等待当前队列DOM异步更新之后执行
原因：

/*vue更新视图的过程是异步的：底层是promise微任务
因此开发中就会遇到已经修改了数据，但是视图没更新
$nextTick:等待当前队列更新完视图之后执行*/

语法：
this.$nextTick( ()=>{ //代码 } )
await this.$nextTick

4.动态组件

作用： 多个组件 使用同一个挂载点
语法： <component :is="组件名"></component>
示例：

<template>
  <div>
   <component :is="uname"></component>
   <button @click="getUser">点我切换</button>
  </div>
</template>
<script>
import MyUser from '@/components/MyUser.vue'
import MyLogin from '@/components/MyLogin.vue'
export default {
  name: 'App',
  components: {MyUser,MyLogin},
  data(){
    return {
      uname:'MyLogin'
    }
  },
  methods:{
    getUser(){
      this.uname = this.uname === 'MyUser'?'MyLogin':'MyUser'
    }
  }
}
</script>