Vue中父、子组件及其传值

目录

一、什么是父、子组件

二、传值——父传子（vue为父，father为子）

三、传值——子传父

---

一、什么是父、子组件

类似于子元素和父元素，子组件和父组件也是“父”套“子”。具体用法如下：

声明两个组件，这里用之前说的的四种方式中的最后一种。

<div id='app'>
        <father></father>
</div>
<template id="father">
        <div>我是父组件
        //将子元素标签放在父组件中
        <son></son>
        </div>
</template>
<template id="son">
        <div>我是子组件</div>
</template>
<script>
    let son = { template: "#son" };
        let father = {
            template: "#father",
            components: {
                son
            }
        }
    //将父组件放在vue实例中
    const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
 
            },
            components: {
                father,
            }
        })
</script>