Vue study notes - components (stepped on a pit)

Recently, when I was learning vue and learning components, I encountered a problem that bothered me for more than half an hour. .

<!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>Show balance</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>

  When registering a partial component using the above writing method, remember that the child component is not registered in the instance, but is registered on the parent component, and the child component must be created first, and then registered in the parent component.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324443361&siteId=291194637