vue---组件嵌套及父子组件传值

一、组件嵌套
SecondItem.vue:

<template>
    <li>{{params.text}}</li>
</template>
<script>
    export default {
        // name 表示设置别名，可以不设置，建议和组件的名称一致
        name: "SecondItem",
        props: {
            params: {
                type: Object,
                required: true,
            },
        },

    }
</script>

Second.vue

<template>
    <div id="app-8">
        <ol>
            <SecondItem
                    v-for="item in params"
                    v-bind:params="item"
                    v-bind:key="item.id"
            ></SecondItem>
        </ol>
    </div>
</template>
<script>
    import SecondItem from "./SecondItem";

    export default {
        name: "First",
        props: {
            params: {
                type: Array,
                required: true,
            },
        },
        components: {
            SecondItem
        },
    }
</script>

First.vue

<template>
    <div id="app" style="padding: 12px;margin:12px">
<br>
        <br>
        <div id="app-8">
            <Second v-bind:params="groceryList"/>
        </div>
        <br>
        <hr>
        <br>
    </div>
</template>
<script>
    import Second from "../components/Second"

    export default {
        name: 'App',
        props: {},
        components:{
            Second,
        },
,
        data() {
            return {
                    { id: 0, text: 'Vegetables' },
                    { id: 1, text: 'Cheese' },
                    { id: 2, text: 'Whatever else humans are supposed to eat' }
                ],
            }
        },
},
//生命周期函数：创建
created() {
          
},
 //生命周期函数：销毁
 destroyed() {
           
 },
}