vue组件（$refs对象，动态组件，插槽，自定义指令）

一、ref

1.ref引用

每个vue组件实例上，都包含一个$refs对象，里面存储着对应dom元素或组件的引用。默认情况下，组件的$refs指向一个空对象。

2.使用ref获取dom元素的引用

<template><h3 ref="myh3">ref组件</h3><button @click="getRef">getRef</button>
</template>
<script>
export default{methods:{getRef(){console.log('this',this.$refs);this.$refs.myh3.style.color='red'}}
}
</script>

3.使用ref引用组件实例

<template><MyIndex ref="myIndexRef"></MyIndex><button @click="getRef">getRef</button>
</template>
<script>
import MyIndex from './index copy.vue';
export default{components:{MyIndex},methods:{getRef(){console.log('this',this.$refs);this.$refs.myIndexRef.reset()}}
}
</script><template><div>{{count}}<button @click="this.count+=1">按钮</button></div>
</template>
<script>
export default{data(){return{count:1}},methods:{reset(){this.count=0}}
}
</script>

4.控制文本框和按钮的按需切换

<template><input type="text" v-if="inputVisible" ref="ipt"><button v-else @click="showInput">getRef</button>
</template>
<script>
export default{data(){return{inputVisible:false}},methods:{showInput(){this.inputVisible=true;//获取文本框的引用对象，访问的ipt是undefind,dom更新是异步的，拿不到最新domthis.$nextTick(()=>{this.$refs.ipt.focus();})}}
}
</script>

5.组件是异步执行dom更新的

6.this.$nextTick(cb)

组件的$nextTick(cb)方法，会把cb回调推迟到下一个dom更新周期之后执行。简单理解：等组件的dom异步地重新渲染完成后，再执行cb回调函数。从而能保证cb回调函数可以操作到最新的dom元素。

二、动态组件

1.什么是动态组件

动态组件时动态切换组建的显示与隐藏。vue提供了一个<component>组件，专门用来实现组件的动态渲染。

a.<component>是组件的占位符

b.通过is属性动态指定要渲染的组件名称

c.<component is="要渲染的组件名称"></component>

2.如何实现动态组件渲染

<template><button @click="comName='Home'">首页</button><button @click="comName='Movie'">电影</button><hr><component :is='comName'></component>
</template>
<script>
import Home from './home.vue'
import Movie from './movie.vue'
export default{components:{Home,Movie},data(){return{comName:'Home'}}
}
</script>

3.使用keep-alive保持组件的状态

默认情况下，动态切换组件时无法保持组件的状态。可以使用vue内置的<keep-alive>组件保持动态组件的状态。

<template><button @click="comName='Home'">首页</button><button @click="comName='Movie'">电影</button><hr><keep-alive><component :is='comName'></component></keep-alive>
</template>
<script>
import Home from './home.vue'
import Movie from './movie.vue'
export default{components:{Home,Movie},data(){return{comName:'Home'}}
}
</script><template><div>Home组件{{ count }}<button @click="count+=1">+1</button></div>
</template>
<script>
export default{data(){return{count:1}},created(){console.log('created');},unmounted(){console.log('unmounted');},
}
</script>

三、插槽

1.什么是插槽

插槽是vue组件为组件的封装者提供的能力。允许开发者在封装组件时，把不确定、希望由用户指定的部分定义为插槽。

可以把插槽认为是组件封装期间，为用户预留的内容占位符。

没有预留插槽的内容会被丢弃

<template><Home><p>-------------</p></Home>
</template>
<script>
import Home from './home.vue'
export default{components:{Home},
}
</script><template><div>Home组件<p>p1p1p1p1p1p1p1p1p1p1p1p1p1</p><slot></slot><p>p2p2p2p2p2p2p2p2p2p2p2p2p2</p></div>
</template>

2.后备内容（默认内容）

封装组件时，可以为预留的<slot>插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。

<template><Home><!-- <p>-------------</p> --></Home>
</template>
<script>
import Home from './home.vue'
export default{components:{Home},
}
</script><template><div>Home组件<p>p1p1p1p1p1p1p1p1p1p1p1p1p1</p><slot>默认xxxxxxxx</slot><p>p2p2p2p2p2p2p2p2p2p2p2p2p2</p></div>
</template>

3.具名插槽

如果在封装组件时需要预留多个插槽节点，则需要为每个<slot>插槽指定具体的name名称。这种带有具体名称的插槽叫做“具名插槽”。

v-slot:可以简写为字符#

<template><Home><!-- v-slot：可简写为# --><template v-slot:header>头部</template><p>-------------</p><template #footer>底部</template></Home>
</template>
<script>
import Home from './home.vue'
export default{components:{Home},
}
</script><template><div>Home组件<slot name="header"></slot><slot>默认xxxxxxxx</slot><slot name="footer"></slot></div>
</template>

4.作用域插槽

在封装组件的过程中，可以为预留的<slot>插槽绑定props数据，这种带有props数据的<slot>插槽叫做作用域插槽。

<template><Home><template v-slot:default="scope">{{ scope }}{{ scope.info.name }}</template></Home>
</template>
<script>
import Home from './home.vue'
export default{components:{Home},
}
</script><template><div>Home组件<slot :info="infomation" :msg="msg"></slot></div>
</template>
<script>
export default{data(){return{infomation:{name:'zs',age:18},msg:'123'}}
}
</script>

解构作用域插槽

<template><Home><template #default="{info,msg}">{{ info.name }}{{ info.age }}{{ msg }}</template></Home>
</template>
<script>
import Home from './home.vue'
export default{components:{Home},
}
</script>

作用域插槽的使用场景

<template><Home><template #default="{user}"><td>{{user.name}}</td><td>{{ user.age }}</td><td><input type="checkbox" :checked="user.state"></td></template></Home>
</template>
<script>
import Home from './home.vue'
export default{components:{Home},
}
</script><template><div>Home组件<table><tr><td>名字</td><td>年龄</td><td>状态</td></tr><tr v-for="item in list" :key="item"><slot :user="item"></slot></tr></table></div>
</template>
<script>
export default{data(){return{list:[{name:'zs1',age:18,state:true},{name:'zs2',age:17,state:false},{name:'zs3',age:15,state:true}],}}
}
</script> 

四、自定义指令

vue 中自定义指令分为两类：私有自定义指令，全局自定义指令。

在每个vue组件中，可以在directives节点下声明私有自定义指令。

1.私有自定义指令

<template><input type="text" v-focus>
</template>
<script>
export default{directives:{focus:{//当被绑定的元素插入到dom中时，会自定触发mounted函数mounted(el){el.focus()//让被绑定的元素自动获取焦点}}}
}
</script>

2.全局自定义指令

在main.js文件中声明自定义指令

const app = createApp(App)
app.directive('focus',{mounted(el){el.focus()}
})

3.updated函数

mounted函数只在元素第一次插入dom时被调用，当dom更新时mounted函数不会被触发。updated函数会在每次dom更新后被调用。

<template><input type="text" v-focus>{{ count }}<button @click="count+=1">+1</button>
</template>
<script>
export default{data(){return{count:1}}
}
</script>//main.jsmain.js
const app = createApp(App)
app.directive('focus',{mounted(el){el.focus()},updated(el){el.focus()}
})

在vue2的项目中使用自定义指令时，mounted->bind,updated->update

如果mounted，updated函数中的逻辑完全相同，可以简写

const app = createApp(App)
app.directive('focus',(el)=>{el.focus()
})

4.指令的参数值

在绑定指令时，可以通过等号的形式为指令绑定具体的参数值。binding.value

<template><input type="text" v-model.number="count" v-focus v-color="'red'"><p v-color="'green'">{{ count }}</p><button @click="count+=1">+1</button>
</template>
<script>
import Home from './home.vue'
export default{components:{Home},data(){return{count:1}}
}
</script>//main.js
const app = createApp(App)
app.directive('focus',(el)=>{el.focus()
})
app.directive('color',(el,binding)=>{el.style.color=binding.value
})

五、Table案例

1.搭建项目基本结构

npm create vite
cd vite-project
npm install

2.请求商品列表数据

npm i axios

//main.js
import axios from 'axios'
//配置请求的根路径
axios.defaults.baseURL='http://localhost:3000'
//将axios挂载为全局的$http自定义属性
app.config.globalProperties.$http=axios

3.封装MyTable组件

a.通过props属性，为MyTable.vue组件指定数据源

b.在MyTable.vue组件中，预留header的具名插槽

c.在MyTable.vue组件中，预留body的作用域插槽

<template><table><thead><slot name="header"></slot></thead><tbody><tr v-for="(item,index) in data" :key="item"><slot name="body" :row="item" :index="index"></slot></tr></tbody></table>
</template>
<script>
export default{props:{data:{type:Array,default:[],require:true}}
}
</script>

4.实现删除功能

5.实现添加标签的功能

a.实现input和button的按需展示（v-if,v-else）

b.让input自动获取焦点(自定义指令)

c.文本框失去焦点自动隐藏

d.文本框的enter,esc按键事件

把用户在文本框中输入的值，预先转存到常量val中，清空文本的值，v-if='false'隐藏文本框

判断val的值是否为空，如果为空，则不进行添加，

判断val的值是否已经存在于数组中，如果存在，则不进行添加，return

将用户输入的内容，作为新标签push到当前tag数组中

<template><MyTable :data="goodsList"><template #header><td>#</td><td>商品名称</td><td>价格</td><td>标签</td><td>操作</td></template>     <template #body="{row,index}"><td>{{index+1}}</td><td>{{ row.title }}</td><td>￥{{ row.price }}</td><td><inputv-if="row.inputVisible"ref="InputRef"v-model.trim="row.inputValue"class="ml-1 w-20"@keyup.enter="handleInputConfirm(row)"@blur="handleInputConfirm(row)"@keyup.esc="row.inputValue=''"v-focus/><el-button v-else class="button-new-tag ml-1" size="small" @click="row.inputVisible = true">+Tag</el-button><el-tag class="ml-2" type="success" v-for="item in row.tag" :key="item">{{ item }}</el-tag></td><td><el-button type="danger" @click="deleteFn(row.id)">删除</el-button></td></template></MyTable>
</template>
<script>
import MyTable from './MyTable.vue'
export default{components:{MyTable},data(){return{goodsList:[]}},methods:{async getGoodsList(){const {data:res}=await this.$http.get('/goodsList')console.log('res',res);this.goodsList = res.map(item=>{return{...item,inputVisible:false,inputValue:''}})},deleteFn(id){this.goodsList = this.goodsList.filter(item=>item.id!==id)},handleInputConfirm(row){const val = row.inputValue;row.inputValue = '';row.inputVisible = false;if(!val||row.tag.indexOf(val) !==-1)returnrow.tag.push(val)},},created(){this.getGoodsList()},directives:{focus(el){el.focus()}}
}
</script>