Vue-父子组件
父子组件
概念
之前分出了、根组件、全局组件、局部组件。那么依据谁挂载了谁，我们可以规定出父子组件的概念。
父子组件概念：当前组件a如果挂在了组件b，那么a是b的父组件，b是a的子组件。
父子组件的特点是相对来说的，相对于子组件来说父组件，相对于父组件来说子组件。ok有点迷糊，请看下面的这段代码其实没有那么复杂。
<script>
let viewTag = {
template: `
<div class="view-tag">
<div class="body" style="background-color: lawngreen"></div>
</div>
`
};
let viewTag2 = {
template: `
<div class="view-tag">
<header-tag></header-tag>
<div class="body" style="background-color: cyan"></div>
<footer-tag></footer-tag>
</div>
`,
};
// 根组件
new Vue({
el: '#app',
data: {
page: 'tag'
},
components: {
viewTag, // 对于根组件来说 viewTag就是子组件
viewTag2, // 对于根组件来首 viewTag2就是子组件
}
})
</script>
并不是说viewTag就是一定是子组件，如果在下面的这段代码里面viewTag组件是根组件的子组件，是headerTag和viewTag的父组件
<div id="app">
<view-tag ></view-tag>
<view-tag-2 ></view-tag-2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 小组件
let headerTag = {
template: `
<div class="header">
<h1 style="text-align: center; line-height: 120px">头</h1>
</div>
`,
};
let footerTag = {
template: `
<div class="footer" >
<h2 style="text-align: center; line-height: 180px">尾</h2>
</div>
`,
};
// viewTag即是父组件也是子组件
let viewTag = {
template: `
<div class="view-tag">
<header-tag></header-tag>
<div class="body" style="background-color: lawngreen"></div>
<footer-tag></footer-tag>
</div>
`,
components: {
headerTag,//对于viewTag来说headerTag是子组件，viewTag是父子组件
footerTag,//对于viewTag来说footerTag是子组件，viewTag是父组件
}
};
// viewTag2即是父组件也是子组件
let viewTag2 = {
template: `
<div class="view-tag">
<header-tag></header-tag>
<div class="body" style="background-color: cyan"></div>
<footer-tag></footer-tag>
</div>
`,
components: {
headerTag,//对于viewTag2来说headerTag是子组件，viewTag是父组件
footerTag,//对于viewTag2来说footerTag是子组件，viewTag是父组件
}
};
// 根组件
new Vue({
el: '#app',
data: {
page: 'tag'
},
components: {
viewTag, // 对于根组件来说 viewTag就是子组件
viewTag2, // 对于根组件来首 viewTag2就是子组件
},
methods: {
action () {
alert('给组件标签绑定事件无法激活')
}
}
})
详细代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body, h1, h2 {
margin: 0;
}
</style>
<style>
.header {
height: 120px;
background-color: orange;
}
.body {
height: 800px;
background-color: pink;
}
.footer {
height: 180px;
background-color: brown;
}
</style>
</head>
<body>
<div id="app">
<view-tag ></view-tag> <!---渲染子组件 而字符组件里面还有子组件 --->
<view-tag-2 ></view-tag-2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 小组件
let headerTag = {
template: `
<div class="header">
<h1 style="text-align: center; line-height: 120px">头</h1>
</div>
`,
};
let footerTag = {
template: `
<div class="footer" >
<h2 style="text-align: center; line-height: 180px">尾</h2>
</div>
`,
};
// 页面组件
let viewTag = {
template: `
<div class="view-tag">
<header-tag></header-tag>
<div class="body" style="background-color: lawngreen"></div>
<footer-tag></footer-tag>
</div>
`,
components: {
headerTag,//对于viewTag来说headerTag是子组件，viewTag是父子组件
footerTag,//对于viewTag来说footerTag是子组件，viewTag是父组件
}
};
let viewTag2 = {
template: `
<div class="view-tag">
<header-tag></header-tag>
<div class="body" style="background-color: cyan"></div>
<footer-tag></footer-tag>
</div>
`,
components: {
headerTag,//对于viewTag2来说headerTag是子组件，viewTag是父组件
footerTag,//对于viewTag2来说footerTag是子组件，viewTag是父组件
}
};
// 根组件
new Vue({
el: '#app',
components: {
viewTag, // 对于根组件来说 viewTag就是子组件
viewTag2, // 对于根组件来首 viewTag2就是子组件
},
});
</script>
</html>
