vue组件之前嵌套
https://www.cnblogs.com/chengduxiaoc/p/7099552.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<!-- 模板可以使用template标签写到外面，然后在components里面调用 -->
<template id="temA">
<div>
<h3>我是：{{msg}}</h3>
<bbb :Fmsg="msg" :Fhandl="this.test"></bbb> <!-- 调用子组件 -->
</div>
</template>
<script>
var app=new Vue({
el:'#box',
components:{
'aaa':{
data:function(){
return{
msg:'我是父组件'
}
},
methods:{
test:function(){
alert('我是父组件的方法');
}
},
template:'#temA',//父组件的模板
components:{ //父组件内注册的子组件
bbb:{
props:['Fmsg','Fhandl'],
template:'<h3 @click="Fhandl">我是子组件 ————————{{Fmsg}}</h3>'
}
}
}
}
})
</script>
</body>
</html>
最终代码：
vue组件之前嵌套的更多相关文章
- vue之slot，组件标签嵌套
vue之slot,组件标签嵌套 插槽(Slot),在各种vue的ui插件中,经常见到的多个组件标签相互嵌套(如下)就是以此为基础的. <el-col > <el-checkbox & ...
- Vue总结第五天：vue-router （使用模块化（创建Vue组件）机制编程）、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套（子路由）、路由传递数据、导航守卫）
Vue总结第五天:vue-router ✿ 路由(器)目录: □ vue中路由作用 □ vue-router基本使用 □ vue-router嵌套路由 □ vue-router参数传递 □ ...
- vue 多层组件相互嵌套的时候 数据源更新 dom没更新 彻底清除组件缓存
当项目中存在多层组件相互嵌套 组件存在严重缓存时 this.$nextTick(() => { ..... }); 不管用 this.$forceUpdate(); 不管用 只能通过深拷贝浅拷 ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- vue组件大集合 component
vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue组件库的那些事儿，你都知道吗？
前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...
- Vue (三) --- Vue 组件开发
------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...
随机推荐
- Java开发笔记（六十九）泛型类的定义及其运用
前面从泛型方法的用法介绍到了泛型的起源,既然单个方法允许拥有泛化的参数类型,那么一个类也应当支持类级别的泛化类型,例如各种容器类型ArrayList.HashMap等等.一旦某个类的定义代码在类名称后 ...
- Java开发笔记（七十六）如何预防异常的产生
每个程序员都希望自己的程序稳定运行,不要隔三岔五出什么差错,可是程序运行时冒出来的各种异常着实烦人,令人不胜其扰.虽然可以在代码中补上try/catch语句捕捉异常,但毕竟属于事后的补救措施.与其后知 ...
- Python 100例（001）
#!/usr/bin/env python # coding:utf-8 '''有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少?''' n = 1 num = [4, ...
- angularjs+webapi2 跨域Basic 认证授权（二）
在上一篇中大概演示了 整个认证授权的过程.今天在这篇博客中将结合上一篇的例子继续在跨域的情况 我们用ionic 写一个简单的页面 值得注意的是 在ionic.bundle.js 里面集成了angula ...
- （二）阿里云ECS Linux服务器外网无法连接MySQL解决方法（报错2003- Can't connect MySQL Server on 'x.x.x.x'(10038)）（自己亲身遇到的问题是防火墙的问题已经解决）
我的服务器买的是阿里云ECS linux系统.为了更好的操作数据库,我希望可以用navicat for mysql管理我的数据库. 当我按照正常的模式去链接mysql的时候, 报错提示: - Can' ...
- 使用 babel-loader（webpack）
参考: https://www.jianshu.com/p/d971bffff546 定位 Webpack 速度慢的原因 打包的命令webpack后加三个参数: --colors 输出结果带彩色,比如 ...
- linux学习笔记-配置vbox虚拟机本地连接和外网同时可用
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 在设置网络里面启用两个网卡,一个桥接,一个网络地址转换 archlinux系统下第一个网络地址转换,第二个桥接 centos7系 ...
- Java发送电子邮件
转自 https://blog.csdn.net/xietansheng/article/details/51673073 纯代码, 详情请至原文查看 需要一个javamail的jar包 以下为实现代 ...
- 使用Semaphore控制对资源的多个副本的并发访问
Semaphores 怎样工作? 您可以将信号量看做可以递增或递减的计数器.用一个数字即5来初始化信号量.现在这个信号量可以连续最多递减五次,直到计数器达到0.一旦计数器为零,你可以将它增加到最多五次 ...
- 智能化CRM客户关系管理系统介绍一
智能化CRM客户关系管理系统介绍一 CRM客户关系管理的定义是:企业为提高核心竞争力,利用相应的信息技术以及互联网技术来协调企业与顾客间在销售.营销和服务上的交互,从而提升其管理方式,向客户提供创新式 ...