组件进阶,插槽,自定义指令,ref 和 $refs

v-model语法糖

v-model语法糖: v-model本质上是value属性和input事件的一层包装

作用: 通过数据双向绑定

• 数据发生变化: 页面会自动变化 v-bind:value
• 页面输入改变: 数据会自动变化 v–on:input

 <input type="text" v-model="msg">
 <input type="text" :value="msg" @input="msg = $event.target.value">

v-model语法糖等价于给input提供了:value属性和@input事件,每次使用input,都要提供value和input事件,很麻烦,所以使用v-model快捷,方便

v-model给组件使用

父传子使用v-model简写

• 定义组件时,接收的值使用value,子传父触发事件写input

<demo :value="money" @input="money = $event"></demo>
#简写
<demo v-model="money"></demo>

ref 和 $refs

作用: ref 和 $refs可以用于获取DOM元素,或组件实例

获取原生DOM标签

• 给需要的dom元素或组件,添加ref属性

<h1 ref="xxx">112233<h1>
<button @click="fn">按钮</button>    

• 通过this.$refs.xxx获取目标标签,

methods:{
    fn(){
        this.$refs.xxx
	}
}

通过ref属性获取组件对象

• 给目标组件,添加ref属性-名字随意

<Demo ref='de'></Demo>

• 通过this.$refs.xxx 获取组件对象,可调用组件对象里面的方法等吧

this.$refs.de.fn()

$nextTick

$nextTick：等DOM更新后, 才会触发执行此方法里的函数体

语法: this.$nextTick(函数体)

<template>
  <div>
    //创建标签显示数据
    <button @click="show" v-if="shoe">点击显示文本框</button>
    <input ref="inp" v-else type="text">
  </div>
</template>
<script>
export default {
data(){
  return{
    shoe:true
  }
},
//获取原生DOM内容(新DOM是异步的)
methods:{
  show(){
  this.shoe = false
  this.$nextTick(() => {
    this.$refs.inp.focus()
  })
  }
}
}
</script>

dynamic 动态组件

动态组件时可以改变的组件

动态组件可以解决多组件在同一位置,切换显示的需求

• component 组件(位置) + is 属性 (哪个组件)
• 修改 is 属性绑定的值 => 切换组件

<button @click="com = 'UserAccount'">显示账号组</button>
<button @click="com = 'Userlnfo'">显示信息组件</button>
<component :is="com"></component>
<script>
import UserAccount from './components/UserAccount.vue'
import UserInfo from './components/UserInfo.vue'
export default {
  components: {
    UserAccount,
    UserInfo
  },
  data() {
    return {
      com: ''
    }
  }
}
</script>

自定义指令

自定义指令：自己定义指令, 封装dom操作，扩展额外功能

• 全局注册

Vue.directive("指令名",{
//inserted函数;当前的绑定的元素被插入到DOM树上
    "inserted"(el){ //el指当前指令绑定的dom参数
       //el扩展额外功能 
    }
})

• 局部注册

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

自定义指令-指令值

• 语法：在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值
• 通过 binding.value 可以拿到指令值，指令值修改会触发 update 函数

<div v-color="color">亮仔是个p</div>
directives: {
  // 自定义一个局部指令
  color: {
    // inserted指令页面加载的时候执行,value结构赋值了
    inserted (el, {value}) {
      el.style.color = value
    },
    // update指令的值改变时触发执行, binding.value指令的值修改触发      // el指令绑定的元素       
        //binding是个对象value是它里面的属性
    update (el, binding) {
      el.style.color = binding.value
    }
  }
}

插槽

默认插槽

基本语法

1. 组件内用占位
2. 使用组件时两标签中间的地方,传入标签替换slot

#使用组件时<MyDialog></MyDialog>夹着的地方, 传入标签替换slot 
<template>
  <div>
    <mydialog>
      <h1>来玩啊,小朋友</h1>
    </mydialog>
  </div>
</template>

#组件内用<slot></slot>占位 
<template>
    <div>
      <slot></slot>
    </div>
</template>

插槽 - 后备内容

插槽后备内容：封装组件时，可以为预留的 <slot> 插槽提供后备内容

语法: 在标签内放置内容, 作为默认显示内容

效果: 外部使用组件时，不传东西，则slot会显示后备内容

外部使用组件时，传东西了，则slot整体会被换掉

具名插槽

具有名字的插槽 (配置了名字), 可以实现定向分发

一旦配置了名字, 只会接收对应的内容, 不是分发给他的, 就不要

步骤:

1. 给插槽起名字
2. 需要使用 template 标签, 将内容包裹成一个整体
3. 通过 v-slot:插槽名, 指定具体分发给谁
4. v-slot 也有缩写，把 (v-slot:) 替换为字符 #

<template>
  <div>
    <mydialog>
    //<template v-slot:content>
    #简写
    <template #content>
      <h1>来玩啊,小朋友</h1>
	 </template>
    </mydialog>
  </div>
</template>

<template>
    <div>
       <slot name="content"></slot>
    </div>
</template>

作用域插槽

作用域插槽: 定义 slot 插槽的同时, 是可以传值的, 在分发内容时, 可以使用

步骤:

1. 给 slot 标签, 以 添加属性的方式传值
2. 所有添加的属性, 都会被收集到一个对象中
3. 在template中, 通过 v-slot:插槽名= "obj" 接收
4. 可以使用解构赋值简化数据的接收

<template>
  <div>
    <mydialog>
    //<template v-slot:content>
    #简写
    //<template #content="obj">
    <template #content="{yes, no}">
      //<h1>{{obj.yes}}</h1>
      //<h1>{{obj.no}}</h1>
    	<h1>{{yes}}</h1>
        <h1>{{no}}</h1>
	 </template>
    </mydialog>
  </div>
</template>

<template>
    <div>
       <slot name="content" :yes="yes" :no="no"></slot>
    </div>
</template>

作用域插槽传递过来的变量,只能在当前template中使用,所以才叫作用域插槽