Vue.js组件嵌套和template外用
2024-08-31 21:12:49
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://blog.csdn.net/zhangyuea/article/details/89421424
最新文章
- git revert和reset区别
- 取代 Windows Search
- 初识JAVA之OOP
- [转载]python中的sys模块(二)
- Android 自定义Dialog类,并在Activity中实现按钮监听。
- Android: R cannot be resolved to a varia...
- JDBC增删改查和查唯一的完整代码
- Bootstrap自带的chart插件
- Java虚拟机:JVM中的Stack和Heap
- apache2部署django以及静态文件
- Postgres by BigSQL and Hadoop_fdw
- jquery隐藏域赋值
- MySQL更改数据库表的存储引擎
- JavaEE GenericServlet 解析
- <;发条游戏设计>;粗翻——序言、
- c/c++ 线性表之单向循环链表
- jquery .On()绑定事件的触发机制
- day_11 py 名片管理系统
- CGLIB代理基础
- 2-3 R语言基础 矩阵和数组
热门文章
- php 依赖注入 和 控制反转 php设计模式
- LG_2051_[AHOI2009]中国象棋
- 浅谈javascript函数执行过程
- Linux中的一些点
- IDEA+Maven+JavaWeb+tomcat项目搭建(图文并茂,详细)
- 基于mykernel完成时间片轮询多道进程的简单内核
- HEXO+Git+Github+域名搭建个人博客
- 怎样解决使用feof()函数时出现的问题?
- 关于js传送json到.net后台处理
- HTTP&;ServletContext&;Response对象_文件上传