提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue.js：父组件和子组件

VueJS组件 和子
2023-09-27 14:22:47 时间

父组件和子组件

1.创建两个组件

const cpnC1 = Vue.extend({
  template:`
    <div>
      <h2>我是标题1</h2>
      <p>我是内容：小奶虎1</p>
    </div>
  `
})

const cpnC2 = Vue.extend({
  template:`
    <div>
      <h2>我是标题2</h2>
      <p>我是内容：小奶虎2</p>
    </div>
  `
})

在这里插入图片描述
父组件与子组件代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>父组件和子组件</title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cpn2></cpn2>
		</div>
		<script type="text/javascript">
			//1.创建第1个组件构造器--子组件
			const cpnC1 = Vue.extend({
				template:`
					<div>
						<h2>我是标题1</h2>
						<p>我是内容：小奶虎1</p>
					</div>
				`
			})
			//2.创建第2个组件构造器--父组件
			const cpnC2 = Vue.extend({
				template:`
					<div>
						<h2>我是标题2</h2>
						<p>我是内容：小奶虎2</p>
						<cpn1></cpn1>
					</div>
				`,
				components:{
					cpn1:cpnC1
				}
			})
			//root组件
			var app = new Vue({
				el: "#app",
				data:{
					message:"hello vue"
				},
				components:{
					cpn2:cpnC2
				}
			});
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章