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. php 关于经纬度距离计算方法

    1.PHP实现通过经纬度计算距离 单位为公里 function getdistance($lng1,$lat1,$lng2,$lat2)//根据经纬度计算距离 { //将角度转为狐度  $radLat ...

  2. （一）MYSQL ERROR 2003 (HY000): Can't connect to MySQL server on '192.168.10.210' (111) 解决方法

    今天在测试MySQL的连接时候,发现连接不通过,并报错ERROR 2003 (HY000): Can't connect to mysql server on '192.168.10.210' (11 ...

  3. ifram 局部刷新，不刷新父级

    function loadIframe(url) { //获取url链接 var u = window.location.href; //因为每次获取的链接中都有之前的旧锚点, //所以需要把#之后的 ...

  4. python地理处理包——pySAL使用

    Pysal是基于Python的开源地理处理库,能提供高层次的空间分析功能.

  5. 使用 empApi 组件实现 Change Data Capture 功能

    Change Data Capture 功能是从 Winter '19 版本开始正式启用的功能. 它是基于"发布-订阅"模式设计,可以将 Salesforce 中记录的改变自动推送 ...

  6. Actor模型浅析 一致性和隔离性

    一.Actor模型介绍 在单核 CPU 发展已经达到一个瓶颈的今天,要增加硬件的速度更多的是增加 CPU 核的数目.而针对这种情况,要使我们的程序运行效率提高,那么也应该从并发方面入手.传统的多线程方 ...

  7. Spark之Yarn提交模式

    一.Client模式 提交命令: ./spark-submit --master yarn --class org.apache.examples.SparkPi ../lib/spark-examp ...

  8. mssql sqlserver 使用sql脚本 清空所有数据库表数据的方法分享

    摘要: 下文讲述清空数据库中所有表信息的方法分享,如下所示: 实验环境:sql server 2008 实现思路: 1.禁用所有约束,外键 2.禁用所有触发器 3.删除表数据 4.开启触发器 5.开启 ...

  9. Class.isAssignableFrom与instanceof的区别

    isAssignableFrom 假设有两个类Class1和Class2.Class1.isAssignableFrom(Class2)表示: 类Class1和Class2是否相同. Class1是否 ...

  10. Swift UIFont

    设置字体 titleLabel.font = UIFont.systemFont(ofSize: 17.0, weight: .heavy)