父子组件创建

最新推荐文章于 2025-07-02 09:48:18 发布

南南合作

最新推荐文章于 2025-07-02 09:48:18 发布

阅读量440

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_42442123/article/details/85764453

Vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个使用Vue.js创建父子组件的基本示例。通过定义'father'和'son'两个组件，展示了如何在父组件中引入并使用子组件，实现页面元素的模块化设计。此示例适用于初学者理解Vue组件的基础概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <div id="app">
        <father></father>
    </div>
    <script>
        // 创建一个fahter组件
        Vue.component('father', {
            template: `<div>我是父组件,<son></son></div>`,
            // 通过components属性创建子组件
            components: {
                // 创建一个son组件
                son: {
                    template: `<span>我是子组件</span>`
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
            }
        })
    </script>
</body>