Vue 学习笔记之 —— 组件（踩了个坑）

最新推荐文章于 2025-09-07 22:29:54 发布

转载最新推荐文章于 2025-09-07 22:29:54 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Sky-Ice/p/8856402.html

文章标签：

#javascript #ViewUI

本文介绍了在Vue中如何正确地注册和使用局部组件。通过一个具体的示例解释了子组件应该被注册到父组件上，并强调了创建子组件和父组件的顺序。这对初学者理解Vue的组件机制非常有帮助。

最近在学习vue，学习组件时，遇到了一个问题，困扰了半个多小时。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <parent></parent>
</div>


<template id="parent">
    <child></child>
</template>
<template id="child">
    <button>显示余额</button>
</template>
<script src="../lib/vue.js"></script>
<script !src="">
    var Child = {        
        template: "#child"
    }

    var Parent = {
        template: "#parent",
        components: {
            "child": Child
        }
    }

    var vm = new Vue({
        el: "#box",
        components: {
            "parent": Parent
        }
    })
</script>
</body>
</html>

　　当采用以上写法注册局部组件的时候，千万记得，子组件不是注册到实例里的，是注册到父组件上的，且一定要先创建子组件，再在父组件中注册。

转载于:https://www.cnblogs.com/Sky-Ice/p/8856402.html