v-for与props联合使用

思路

封装一个带有v-for的组件 需要用时只需要调用并实现动态渲染 优点是节约代码 使代码结构更加简洁

1、子组件的封装

<template><ul><!-- v-for的基本格式，item：自己定义的单个项目的名字 list：自己定义的数组的名字 --><li v-for="item in list" :key="item">{{ item.name }}</li></ul></template><script>export default {name: "yanshi",props: {//规定list类型为array 即数组，不需要规定数组中变量的类型 //父组件传给它什么类型就是什么类型list: Array,},};</script>

2、子组件的调用

<script>// import调用子组件import yanshi from "./yanshi.vue";export default {name: 'App', // 注册子组件// tip：一定要使用组件哦！不然会报错哒！components:{yanshi,}}</script>

3、父组件数据的传输

<template><div><!-- 使用子组件 --><!-- 绑定子组件list 为父组件的要传输的变量的名字（自己定义） --><yanshi :list="fatherListName"></yanshi></div></template><script>// import调用子组件import yanshi from "./yanshi.vue";export default {name: "App",// 用data函数返回数组数据data() {return {// 这里的fatherListName是自己定义的与子组件那个list绑定的数组，注意区分// 注意要写成数组的形式fatherListName:[{name:这是数组中第一组数},{name:这是数组中第二组数},{name:这是数组中第三组数},{name:这是数组中第四组数},]};},};</script>

Tip：一定要将v-for写在子组件中

// 要在黑暗的地方努力发光，不是救赎，是蜕变。