1. Vue父组件向子组件传值

发布于 2022年 04月 11日 06:43

父组件Home.vue

<template>
    <div>
        <Pass :List="List"></Pass>
    </div>
</template>
<script>
import Pass from "../components/Pass"
export default {
    data(){
        return{
            List:[
                {
                    name:'东'
                },
                {
                    name:'西'
                },
                {
                    name:'南'
                },
                {
                    name:'北'
                }
            ],
            title:'男孩'
        }
    },
    components:{
        Pass
    }
}
</script>

子组件pass.vue

 <template>
    <div>
        <div v-for="(item,inx) in List" :key="inx">
            <div>{{item.name}}</div>
        </div>
        <h3>{{title}}</h3>
    </div>
</template>
<script>
export default {
  props: ["List",'title']
};
</script>

推荐文章