具名插槽是指将父组件中的数据传到子组件中,此外,该类型插槽有三种写法,第一种是属于旧编写版本,后面两种是刚出来的。
父组件:
子组件:
作用域插槽是指将子组件中的数据传到父组件中,此外,该类型数据在父组件中可以进行遍历等数据操作。
父组件:
子组件:
子组件中的数据:
默认插槽只需要子组件中含有一个slot标签即可,不用给定name值,变可以自动的插入,该内容属于多父组件内部值对应子组件内部单个slot。
父组件:
父组件数据:
子组件:
子组件:
父组件:
{item.title}} -->
- {{ item }}
- {{ item }}
- {{ item }}
import ChaCao from "./components/ChaCao.vue";
export default {
name: "RiC",
data() {
return {
foods: ["火锅", "烧烤", "小龙虾", "牛排"],
games: ["红色警戒", "穿越火线", "劲舞团"],
films: ["《教父》", "《拆弹专家》", "《你好,李焕英》"],
};
},
components: {
ChaCao,
},
methods: {
btn(index) {
console.log(index);
},
},
};
子组件:
-->
{title}}
{{title}}分类
这里可以添加默认值,若是传了那么直接使用传来得数据
export default{
name:'ChaCao',
// data(){
// return{
// array:[
// {id:1,title:'李四',sex:'男'},
// {id:2,title:'王五',sex:'男'},
// {id:3,title:'赵六',sex:'男'},
// {id:4,title:'田思思',sex:'女'},
// ]
// }
// },
props:['title'],
}