nextTick
- 语法：
this.$nextTick(回调函数) - 作用：在下一次 DOM 更新结束后执行其指定的回调。
- 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
插槽
- 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
- 分类：默认插槽、具名插槽、作用域插槽
- 使用方式：
- 默认插槽：
父组件中： <Category> <div>html结构1</div> </Category> 子组件中： <template> <div> <!-- 定义插槽 --> <slot>插槽默认内容...</slot> </div> </template>
例如：App.vue
<template> <div class="container"> <Category title="美食"> <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" /> </Category> <Category title="游戏"> <ul> <li v-for="(item, index) in games" :key="index">{{ item }}</li> </ul> </Category> <Category title="电影"> <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" ></video> </Category> </div> </template> <script> import Category from "./components/Category.vue"; export default { name: "App", components: { Category }, data() { return { foods: ["火锅", "烧烤", "小龙虾", "牛排"], games: ["永劫无间", "穿越火线", "英雄联盟", "糖豆人"], films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《尚硅谷》"], }; }, }; </script> <style scoped> .container { display: flex; justify-content: space-around; } h3 { text-align: center; background-color: orange; } img { width: 100%; } video { width: 100%; } </style>
Category.vue
<template> <div class="category"> <h3>{{ title }}分类</h3> <!-- 定义一个插槽，等着组件的使用者进行填充 --> <slot>默认值</slot> </div> </template> <script> export default { name: "Category", props: ["title"], }; </script> <style> .category { background-color: pink; width: 200px; height: 300px; } </style>
- 具名插槽：
父组件中： <Category> <template slot="center"> <div>html结构1</div> </template> <template v-slot:footer> <div>html结构2</div> </template> </Category> 子组件中： <template> <div> <!-- 定义插槽 --> <slot name="center">插槽默认内容...</slot> <slot name="footer">插槽默认内容...</slot> </div> </template>
- 作用域插槽：(重要)
- 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
- 具体编码：
父组件中： <Category> <template scope="scopeData"> <!-- 生成的是ul列表 --> <ul> <li v-for="g in scopeData.games" :key="g">{{g}}</li> </ul> </template> </Category> <Category> <template slot-scope="scopeData"> <!-- 生成的是h4标题 --> <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4> </template> </Category> 子组件中： <template> <div> <slot :games="games"></slot> </div> </template> <script> export default { name:'Category', props:['title'], //数据在子组件自身 data() { return { games:['红色警戒','穿越火线','劲舞团','超级玛丽'] } }, } </script>
例如：App.vue
<template> <div class="container"> <Category title="游戏" type="ul"> <template scope="giao"> <!-- {{ giao.games }} --> <ul> <li v-for="(item, index) in giao.games" :key="index">{{ item }}</li> </ul> </template> </Category> <Category title="游戏" type="ol"> <template scope="giao"> <!-- {{ giao.games }} --> <ol> <li style="color: red" v-for="(item, index) in giao.games" :key="index" > {{ item }} </li> </ol> </template> </Category> <Category title="游戏" type="h4"> <template slot-scope="giao"> <h4 v-for="(item, index) in giao.games" :key="index">{{ item }}</h4> </template> </Category> </div> </template> <script> import Category from "./components/Category.vue"; export default { name: "App", components: { Category }, }; </script> <style scoped> .container { display: flex; justify-content: space-around; } img { width: 100%; } video { width: 100%; } h4 { text-align: center; } </style>
Category.vue
<template> <div class="category"> <h3>{{ title }}分类</h3> <!-- 定义一个插槽，等着组件的使用者进行填充 --> <slot :games="games">默认值</slot> </div> </template> <script> export default { name: "Category", props: ["title"], data() { return { games: ["永劫无间", "穿越火线", "英雄联盟", "糖豆人"], }; }, }; </script> <style> .category { background-color: pink; width: 200px; height: 300px; } h3 { text-align: center; background-color: orange; } </style>
