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组件之前嵌套的更多相关文章

  1. vue之slot,组件标签嵌套

    vue之slot,组件标签嵌套 插槽(Slot),在各种vue的ui插件中,经常见到的多个组件标签相互嵌套(如下)就是以此为基础的. <el-col > <el-checkbox & ...

  2. Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)

    Vue总结第五天:vue-router ✿ 路由(器)目录: □  vue中路由作用 □  vue-router基本使用 □  vue-router嵌套路由 □  vue-router参数传递 □  ...

  3. vue 多层组件相互嵌套的时候 数据源更新 dom没更新 彻底清除组件缓存

    当项目中存在多层组件相互嵌套 组件存在严重缓存时  this.$nextTick(() => { ..... }); 不管用 this.$forceUpdate(); 不管用 只能通过深拷贝浅拷 ...

  4. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  5. vue组件大集合 component

    vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...

  6. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  7. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  8. Vue组件库的那些事儿,你都知道吗?

    前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...

  9. Vue (三) --- Vue 组件开发

    ------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...

随机推荐

  1. Asp.Net MVC 读取json文件

    有些系统上面的配置可以做成config里面的appsetting.这里要求写在json文件里面. 首先 添加命名空间 using Newtonsoft.Json; using System.IO; u ...

  2. finereport报表--动态格间运算 一

    一.运算符:   ! 绝对值 A2[A2:!1] ;   A2 标示从列A纵向第2单元格开始,!1 表示第1个位置的单元格; [A2:!1] 代表索引,表示从A列纵向开始往下,第1个单元格的位置的索引 ...

  3. 自然语言处理(nlp)比计算机视觉(cv)发展缓慢,而且更难!

    https://mp.weixin.qq.com/s/kWw0xce4kdCx62AflY6AzQ 1.  抢跑的nlp nlp发展的历史非常早,因为人从计算机发明开始,就有对语言处理的需求.各种字符 ...

  4. App跟web定位元素页面相互切换

    很多QA在做UI自动化或者App自动化的时候,会遇到在web页面要抓取App模式的元素,或者是在App要抓取H5页面的元素,从网上整理了一些方法,不一定能解决,但是试一下也未尝不可,如果解决了就记得关 ...

  5. 从分治算法到 Hadoop MapReduce

    从分治算法说起 要说 Hadoop MapReduce 就不得不说分治算法,而分治算法其实说白了,就是四个字 分而治之 .其实就是将一个复杂的问题分解成多组相同或类似的子问题,对这些子问题再分,然后再 ...

  6. Ext.grid.panel 改变某一行的字体颜色

    grid.getStore().addListener('load', handleGridLoadEvent); function handleGridLoadEvent(store, record ...

  7. Linux 环境 Intelij Idea 安装与快捷图标配置

    索引: 目录索引 参看代码 GitHub: intelij-idea.txt 一.Linux (DeepinOS) 环境 1.官网下载 ideaIU-.tar.gz 2.解压 .tar.gz -C ~ ...

  8. sqlserver 清空数据 主键从1开始

    TRUNCATE  TABLE  TbName   --TbName是表名 表清空数据之后 使新增加的记录保持从1 开始

  9. mysql安装和配置(windowns||centos)

    windows10版本安装 1.获取mysql压缩包 https://dev.mysql.com/downloads/mysql/ 2.解压并配置文件my.ini .解压的文件路径 D:\Progra ...

  10. LeetCode算法题-Non-decreasing Array(Java实现)

    这是悦乐书的第283次更新,第300篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第151题(顺位题号是665).给定一个包含n个整数的数组,您的任务是通过修改最多1个元 ...