0
点赞
收藏
分享

微信扫一扫

Vue.js组件嵌套和template外用

sullay 2022-08-29 阅读 97

Vue.extend组件的嵌套和template外用

组件嵌套分为全局组件嵌套和局部组件嵌套

  • 组件嵌套需要将子元素写在父元素内
  • 子组件必须在父组件中注册之后才能在父组件的模板中使用

全局组件嵌套

 

Vue.component('Father',{
template: '<h3> father <Son></Son> </h3>'//这里要把子组件加进来
})
Vue.component('Son',{
template: '<h3> son </h3>'
})

new Vue({
el: '#app',
})

 

局部组件嵌套

new Vue({
el: '#app',
components: {
'Father': {
template: '<div> father <Son/> </div>',//这里也要把子组件加进来,组件可以使用单标签
components: {
'Son': {//子组件必须在父组件内创建才行
template: '<h3> Son </h3>'
}
}
}
}
})

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://www.VuejsDev.com​​ 用于梳理知识点



举报

相关推荐

0 条评论