<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn2></cpn2>
<!--<cpn1></cpn1>-->
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建第一个组件构造器(子组件)
const cpnC1 = Vue.extend({
template: `
<div>
<h2>我是标题1</h2>
<p>我是内容, 哈哈哈哈</p>
</div>
`
})
// 2.创建第二个组件构造器(父组件)
const cpnC2 = Vue.extend({
template: `
<div>
<h2>我是标题2</h2>
<p>我是内容, 呵呵呵呵</p>
<cpn1></cpn1>
</div>
`,
components: {
cpn1: cpnC1
}
})
// root组件 【根组件】
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
components: {
cpn2: cpnC2
}
})
</script>
</body>
</html>
516 vue父组件和子组件
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
VUE框架组件化开发之单文件组件化开发------VUE框架
VUE框架组件化开发之单文件组件化开发------VUE框架
App html vue.js -
vue循环传值组件化
vue
html 组件化 -
Vue--引用组件--递归/循环--方法/教程/实例
其他网址组件之间循环引用_灵灵7的博客-博客
vue.js 递归 循环引用 -
Vue组件基础--简单了解vue组件
Vue组件基础–简单了解vue组件Vue组件是什么?组件就像是提前做好的模具,使
vue 前端 数据 事件触发 传递数据 -
vueselect组件 vue 组件
组件基础 一、组件作用 组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。
vueselect组件 html Vue 自定义属性