vue 父组件 和子组件 复习记录
- 组建的创建的使用
- 子组件 就是 在注册的组件里 在注册一个组件
运行结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../../外部引入/vue.js"></script>
</head>
<body>
<div id="app">
<cpn2></cpn2>
<cpn1></cpn1>
</div>
<script>
// 创建第一个组件构造器
const cpnC1 = Vue.extend()
// 创建第二个组件
const cpnC2 = Vue.extend()
// Vue实例
var app = new Vue({
el: '#app',
data: {},
methods: {},
/* 注册组件2 */
components: {
cpn2: {/* 用对象的形式把组件里的内容写出来,即组件构造器的名字被组件的内容代替了 这个是 语法糖 */
template:
` <div>
<h2>标题2第2个组件</h2>
<p>这是组件2 这个是父组件</p>
<cpn1></cpn1>
</div>`,
components: {
cpn1: {
template:
`<div>
<h2>标题1第一个组件</h2>
<p>这个是组件1 作为子组件,因为他是在组件2 里面注册的</p>
</div>`
}
}
},
cpn1: {
template:
`<div>
<h2>标题1 第一个组件</h2>
<p>这个是组件1本身</p>
</div>`}
// 组件1 的注册 代表 组件1 可以被单独使用,而不是嵌套在父组件里面
}
});
</script>
</body>
</html>