前言：
目前小伙伴们对“vue组件嵌套组件”大概比较关心，同学们都需要分析一些“vue组件嵌套组件”的相关内容。那么小编同时在网络上收集了一些对于“vue组件嵌套组件””的相关内容，希望看官们能喜欢，小伙伴们一起来学习一下吧！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./asset/vue.js"></script> <title>Vuejs</title></head><body> <div id="app"> <zhangwuji></zhangwuji> </div></body><script> var father = { template: `<p style="color:red">Hello, my name is Zhangcuishan</p>` }; var zhangwuji = { template:` <div> <p>Hello , my name is Zhangwuji! </p> <father></father> </div> `, components:{ "father":father } }; var app=new Vue({ el:'#app', data:{ }, components:{ 'zhangwuji':zhangwuji } })</script></html>页面输出
解析
father组件必须包含在某个实体标签内 否则会报错(Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.)子组件的声明一定要放在父组件声明之前 否则会报错(Unknown custom element: <father> - did you register the component correctly?)
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #vue组件嵌套组件
