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 ...
随机推荐
- 表单的自动到json与urlstr
将表单序列化成json,将json转换成字符串 //将表单序列化成json 字符串 $.fn.serializeObject = function(){ var obj = {}; var count ...
- 》》vue
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 关于hash和ico的一些关联
最近測试提出一个bug.说某几个页面中的ico不显示,于是针对此问题排查原因. 首先,确保页面中的link已引入favicon.ico. 经查看,发现是js中的location.hash导致了ico不 ...
- 【quickhybrid】JSBridge的实现
前言 本文介绍quick hybrid框架的核心JSBridge的实现 由于在最新版本中,已经没有考虑iOS7等低版本,因此在选用方案时没有采用url scheme方式,而是直接基于WKWebView ...
- mysql连接错误问题
ERROR 1130: Host '192.168.1.3' is not allowed to connect to this MySQL server 解决方法:1. 改表法.可能是你的帐号不允许 ...
- 常见.NET功能代码汇总 （3）
33,彻底关闭Excel进程 .NET中使用Excel属于使用非托管资源,使用完成后一般都要用GC回收资源,但是,调用GC的位置不正确,Excel进程可能无法彻底关闭,如下面的代码: static v ...
- 《程序设计方法》【PDF】下载
内容简介 <程序设计方法>主要以方法为主导,结合C语言,把程序设计方法学研究中若干成熟的理论和方法用通俗易懂的语言描述出来.<程序设计方法>还选取趣味性强.技巧性高.能够启发学 ...
- 《Spark大数据处理：技术、应用与性能优化》【PDF】 下载
内容简介 <Spark大数据处理:技术.应用与性能优化>根据最新技术版本,系统.全面.详细讲解Spark的各项功能使用.原理机制.技术细节.应用方法.性能优化,以及BDAS生态系统的相关技 ...
- JDBC中rs.beforeFirst()
写在前面: 最近的项目比较老,用到了jdbc查询数据,展示数据.有时候一个查询语句的ResultSet需要用到好几次,即需要遍历好几次同一个查询结果集,那要怎么办呢? 使用如下方式即可解决 其实这里理 ...
- 图片Ping
前面的话 在CORS出现以前,要实现跨域Ajax通信颇费一些周折.开发人员想出了一些办法,利用DOM中能够执行跨域清求的功能,在不依赖XHR对象的情况下也能发送某种请求.虽然CORS技术已经无处不在, ...