组件之间的嵌套
2019-03-03 本文已影响0人
咸鱼前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7.2.2单向数据流</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<parent></parent>
</div>
<script type="text/javascript" src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var childNode = {
template: "<div>childNode</div>"
};//创建子组件的模板
var parentNode = {
template: `
<div class='parent'>
<child></child>
<child></child>
</div>
`,//这里用es6语法的模板字符串
components: {
'child': childNode//这里将子组件注册到父组件内。用<child>渲染childNode
}
}//创建父组件的模板
var vm = new Vue({
el: "#app",
components: {
"parent": parentNode//将父组件注册到根元素上，用<parent>渲染parentNode
}
})
//达到了组件之间的嵌套
</script>
</body>
</html>
