从零开始学VUE之组件化开发(注册父子结构组件)

彼岸舞

发布于 2021-06-07 17:36:07

5180

父组件与子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/vue.js"></script>
</head>
<body>
    <div id="app">
      <fa-c></fa-c>
    </div>
</body>
<script>
    // 定义子组件
    const sonC = Vue.extend({
      template:`
        <div>
            <h2>这是一个子组件</h2>
        </div>
      `
    })
    // 定义父组件(使用子组件)
    const faC = Vue.extend({
      template:`
        <div>
            <h2>这是一个父组件</h2>
            <span>
                <son-c></son-c>
            </span>
        </div>
      `,
      components:{
        sonC:sonC
      }
    })

    // 创建vue
    const vue = new Vue({
        el: '#app',
        data: {

        },
        components: {
          faC:faC
        }
    })
</script>
</html>

运行效果

结构图

作者：彼岸舞

时间：2021\06\02

内容关于：VUE

本文属于作者原创,未经允许,禁止转发

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-06-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

从零开始学VUE之组件化开发(注册父子结构组件)

从零开始学VUE之组件化开发(注册父子结构组件)

父组件与子组件

结构图

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐