html 父模板,详解vue父子模版嵌套案例
这里是父子模版的调用
这里是针对于vue1.0，如果要学2.0，建议大家去看官方文档
第一种，子组件模版直接写在js里
//定义模版挂载点my-component
var Component = Vue.extend({// 定义
template: '
',
data: function () {
return {
name: 'yuxie'
}
}
});
Vue.component('com-ponent', Component);// 注册
//注意，extend(json) 和 vue.component('com-ponent', json)//这两个JSON是相等的。
//所以下面第二种会将extend()函数省略掉，直接在component中定义，系统会自动调用extend函数。
var conp = new Vue({// 创建根实例
el: '#exampleBox1'
});
第二种，使用HTML模版
{{text}}
Vue.component('children', {//child是模版挂载的标签名
template: '#child-template',//id对应子组件的ID
data: function () {
return {
text: '这里是子组件的内容'
}
}
});
var parent = new Vue({// 初始化父组件
el: '#exampleBox2',
data: {
parent: {
name:'这里是父组件的内容'
}
}
})
第三种、来一个复杂的
复用一次
复用二次
···
···
//定义子组件，子组件必须在父组件之前定义。
var Child = Vue.extend({template: '
'});
//定义父组件
var Parent = Vue.extend({
template: '
',
components: {
// 调用子组件
'child-component': Child
}
});
// 注册父组件
Vue.component('my-component', Parent);
//复用子组件。
Vue.component('child', Child);
// 创建根实例，所有组件都需要在根实例之前创建。
new Vue({
el: '#example'
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
html 父模板,详解vue父子模版嵌套案例相关推荐
- vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
- vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
- dom不刷新 vue 加数据后_详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结...
如果你发现你自己需要在 vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 vue 会在初 ...
- vue输入框输入触发事件_详解.vue文件中监听input输入事件（oninput）
详解.vue文件中监听input输入事件(oninput) .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变 ...
- 实例化vue发生了什么?(详解vue生命周期)
实例化vue发生了什么?(详解vue生命周期) 本文将对vue的生命周期进行详细的讲解,让你了解一个vue实例的诞生都经历了什么~ 我在Github上建立了一个存放vue笔记的仓库,以后会陆续更新一些 ...
- vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
- vue遇到ie兼容问题如何处理_详解vue 兼容IE报错解决方案
IE 页面空白 报错信息 此时页面一片空白 报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set. ...
- 详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- 26.C++- 泛型编程之类模板(详解)
在上章25.C++- 泛型编程之函数模板(详解) 学习了后,本章继续来学习类模板 类模板介绍 和函数模板一样,将泛型思想应用于类. 编译器对类模板处理方式和函数模板相同,都是进行2次编译 类模板通 ...
最新文章
- 记忆网络RNN、LSTM与GRU
- java对称加密，java异或加密，Java高性能对称加密
- 罗永浩担任“大局官”，小米双十一狂发补贴
- 安装VS2008错误解决
- 关于Git GUI的使用方式
- 计算机串口接打印机并口,电子连接系统上的串口和并口知识分享
- 数据库设计--企业人事管理系统（有关数据库的课程设计）
- STM32G431简介
- linux打补丁教程,Linux下patch打补丁命令
- matlab拟合多自变量函数,多个自变量的函数拟合问题
- PHP+jQuery+Flash完美演示翻盘抽奖
- 2022-2028全球与中国脚踏泵市场现状及未来发展趋势
- 从面试官的视角来提升面试者的必须具备的IT技能
- 实现简易版vue2（数据劫持，观察者，发布订阅）
- 下载Windows ISO镜像的方法 （超详细 适合新手入门）
- 一般生产环境LINUX服务器配置
- Centos6 安装yum 完美安装（转载）
- 【noHandlerFound(DispatcherServlet.java:1278)和No mapping for GET】SpringMVC 404和中文乱码问题和解决方案记录
- x64dgb安装插件教程
- Protege使用教程（基础篇）