Vue.js组件嵌套和template外用
发布时间：2022-10-14 23:08:31 203 相关标签：
Vue.extend组件的嵌套和template外用
组件嵌套分为全局组件嵌套和局部组件嵌套
- 组件嵌套需要将子元素写在父元素内
- 子组件必须在父组件中注册之后才能在父组件的模板中使用
全局组件嵌套
Vue.component('Father',{
template: '
father
'//这里要把子组件加进来
})
Vue.component('Son',{
template: '
son
'
})
new Vue({
el: '#app',
})
局部组件嵌套
new Vue({
el: '#app',
components: {
'Father': {
template: '
father
',//这里也要把子组件加进来，组件可以使用单标签
components: {
'Son': {//子组件必须在父组件内创建才行
template: '
Son
'
}
}
}
}
})
template的外用
注意：template外用，组件模板中的第一个元素必须唯一
<body>
<div id="app">
<Hello></Hello><!---在组件模板中调用之后还要在根实例模板中调用一下--->
</div>
<template id="Hello">
<div class="content"><!---这个元素必须唯一的--->
<ul>
<li><a href="">你好</a></li><!---里面的子元素可以多个--->
<li><a href="">你好</a></li>
<li><a href="">你好</a></li>
</ul>
</div>
</template>
</body>
Vue.component('Hello',{
template: '#Hello'//这里的作用相当于根实例中的el:'app' ;作用一样，都是挂载
})
new Vue({
el: '#app',
})
---------------------------------------------
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果是对自己行动的嘉奖。
↑面的话，越看越不痛快，应该这么说：
生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！
文章来源： https://blog.51cto.com/u_15770151/5630378
特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。
举报
