vue-父子组件嵌套的示例
组件注册：
// 注册组件
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
注册局部组件
var childComponent = Vue.extend({
template: '<p>this is child template</p>'
});
Vue.component("parent",{
template: '<div><p>this is parent template</p><child></child></div>',
components: {
'child': childComponent,//child只能在父组件里使用
}
});
完整的html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<title>vue-demo</title>
</head>
<body>
<h1>vue父子组件嵌套示例</h1>
<div id='app'>
<my-component></my-component>
<parent></parent>
</div>
</body>
<script>
// 注册组件
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 子组件
var childComponent = Vue.extend({
template: '<p>this is child template</p>'
});
// 父组件
Vue.component("parent",{
template: '<div><p>this is parent template</p><child></child></div>',
components: {
'child': childComponent,
}
});
new Vue({
el: '#app',
data: {
}
})
</script>
</html>
注意，组件只能有一个根元素，所以最好使用一个div元素包裹组件模板，否则会提示错误：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.
以下是错误的：
Vue.component("parent",{
template: '<div><p>this is parent template</p></div><child></child>',//组件有多个根元素
components: {
'child': childComponent,
}
});
也可以使用非字符串模板注册组件，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<title>vue-demo</title>
</head>
<body>
<h1>vue父子组件嵌套示例</h1>
<template id="child">
<p>this is child template</p>
</template>
<template id="parent">
<div>
<p>this is parent template</p>
<child></child>
</div>
</template>
<div id="app">
<parent></parent>
</div>
<script src="vue.js"></script>
<script>
var childComponent = Vue.extend({
template: '#child'
});
Vue.component("parent",{
template: '#parent',
components: {
'child': childComponent,
}
});
var app = new Vue({
el: '#app'
});
</script>
</body>
</html>
效果是一样的。
（完）
vue-父子组件嵌套的示例的更多相关文章
- vue父子组件嵌套的时候遇到 - Component template should contain exactly one root element. If you are using v-i
转自:https://blog.csdn.net/yangyiboshigou/article/details/72084619
- vue父子组件
vue父子组件 新建 模板 小书匠 为什么要厘清哪个是父组件,哪个是子组件? 一开始浏览器接收和要显示的数据非常少,此时无需划分区域进行布局.随着页面数据量的增加,如果单纯一个窗口来加载和显示数据, ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- vue父子组件的传值总结
久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- Vue父子组件生命周期
转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...
- vue父子组件传值加例子
例子:http://element-cn.eleme.io/#/zh-CN/component/form 上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...
- vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
- vue组件定义方式，vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
随机推荐
- Java面试题集合（比较实用）
1.Java集合框架是什么?说出一些集合框架的优点? 每种编程语言中都有集合,最初的Java版本包含几种集合类:Vector.Stack.HashTable和Array.随着集合的广泛使用...... ...
- Cairo-Dock 系统关机无效
正文 背景 Cairo-Dock 设置为开机自己主动启动后.系统菜单条里的关机选项就无效了,命令行里能够使用命令关机. 搜索过程 这次google找到的结果让我非常失望,于是仅仅好百度了. 在百度贴吧 ...
- linux系统编程：进程间通信-fifo
进程间通信-fifo 进程间通信的还有一种方式是fifo. fifo是还有一种管道:有名管道.从名字能够看出.它也是队列. 使用fifo通信前,得先创建fifo $ mkfifo myfifo 随后仅 ...
- Mybatis中如何将POJO作为参数传入sql
今天在工作时,需要将获取的用户的注册信息插入数据库,开始的做法是将所有的model的属性作为DAO接口的参数,后来想想不对劲,要是有100个属性,那我这个接口岂不是要有100个参数传进来? 于是我就考 ...
- nginx+redis实现session的共享
上一篇我们介绍了nginx实现的负载均衡和动静分离,可看这边. 我们在文章的末尾说到,负载均衡需要面临的一个问题是内存数据的同步.例如:我有A,B两台服务器做了负载均衡,当我在A服务器上执行了登录并且 ...
- MVC+EF 入门教程（一）
一.前言 本人小白,写这篇博客是为了记录今天一天所学的知识,可能表达不是那么的准确和清楚,欢迎在留言区写下您的建议,欢迎纠错.希望这篇文章对你有所帮助学习 .Net MVC有所帮助.废话不多说了,我们 ...
- 【java】网络socket编程简单示例
package 网络编程; import java.io.IOException; import java.io.PrintStream; import java.net.ServerSocket; ...
- npm的使用总结
npm常用命令 npm list 查看当前目录下已安装的包 npm root -g 查看全局安装的包的路径 npm help 查看全部命令 npm update/uninstall moduleNam ...
- Jstree 使用CheckBox插件 选中父节点时被禁用的子节点也会选中问题
问题描述: 最近用jstree遇到一个问题,使用CheckBox插件时,当父节点选中时,被禁用的子节点也会选中如下 解决方案: 1. 将jstree升级到最新的版本,v3.3.4及以上就可以 2. ...
- Xamarin android SwipeRefreshLayout入门实例
android SwipeRefreshLayout 是实现的效果就是上滑下拉刷新ListView 获取其他控件数据.基本上每个App都有这种效果.Google提供了一个官方的刷新控件SwipeRef ...