Vue 学习笔记之 —— 组件(踩了个坑)

时间:2023-01-05 14:49:27

最近在学习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>

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