解决方法：　　

定义了两个 Vue.component 在 el 中使用的时候要用 双标签， 用单表标签的时候，只会显示第个 组件间
这样写只显示 welcome-button 组件
<welcome-button @welcome="sayHi"/>
<magic-eight-ball @give-advice="showAdvice"/>
--------------------------------
改成双标签后，就会显示两个组件了。
<welcome-button @welcome="sayHi"></welcome-button>
<magic-eight-ball @give-advice="showAdvice"></magic-eight-ball>

完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>$emit</title>

    <script src="node_modules/vue/dist/vue.min.js"></script>

</head>

<body>

    <div id="app">

        <welcome-button @welcome="sayHi"></welcome-button>

        <magic-eight-ball @give-advice="showAdvice"></magic-eight-ball>

    </div>

    <script>

        /*

        注：

            定义了两个 Vue.component 在 el 中使用的时候要用  双标签， 用代表标签的换，只会显示第个 组件间

            这样写只显示 welcome-button 组件

             <welcome-button @welcome="sayHi"/>

             <magic-eight-ball @give-advice="showAdvice"/>

             --------------------------------

             改成双标签后，就会显示两个组件了。

             <welcome-button @welcome="sayHi"></welcome-button>

             <magic-eight-ball @give-advice="showAdvice"></magic-eight-ball>

        */

        /*---------------无参数---------------------*/

        Vue.component('welcome-button', {

            template: `<button v-on:click="$emit('welcome')">

                         点我

                       </button>`

        });

        /*-----------------有参数---------------*/

        Vue.component('magic-eight-ball', {

            data: function () {

                return {

                    possibleAdvice: ['Yes', 'No', 'Maybe']

                }

            },

            methods: {

                giveAdvice: function () {

                    var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length);

                    // console.log( this.possibleAdvice[randomAdviceIndex]);

                    this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])

                }

            },

            template: ` <button v-on:click="giveAdvice">

                           点我出发父组件的方法，并传参

                        </button>`

        })

        new Vue({

            el: '#app',

            methods: {

                sayHi(){

                  alert('Hi!');

                },

                showAdvice(advice){

                    alert(advice)

                 }

            },

        });

    </script>

</body>

</html>

使用单标签引用组件时，效果图：

使用双标签引用组件时，效果图：

Vue中使用Vue.component定义两个全局组件，用单标签应用组件时，只显示一个组件的问题和 $emit的使用。的更多相关文章

  1. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...

  2. SqlSever基础 union 联合查询，厉害的并集 重复项只显示一个 两个查询结果并在一起后排序

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  3. Excel在任务栏中只显示一个窗口的解决办法

     Excel在任务栏中只显示一个窗口的解决办法  以前朋友遇到过这个问题,这次自己又遇到了,习惯了以前的那种在任务栏中显示全部窗口,方便用Alt+Tab键进行切换． 如果同时打开许多Excel工作簿, ...

  4. Vue 中的 mixin,component,render,hoc

    在项目中,一般我们经常会基于一套现有组件库进行快速开发,但是现实中往往需要对组件库进行定制化改造二次封装 混入(mixin) vue 官方介绍 混入 (mixin) 提供了一种非常灵活的方式,来分发 ...

  5. Vue 中的Vue Router一级路由，二级路由，三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  6. vue 组件来回切换时 记住上一个组件滚动位置(keep-alive）

    记住组件滚动状态: 使用场景:从某列表组件进入详情页,在返回的时候需要保留列表组件状态,包括滚动的高度.这个时候需要keep-alive配合. 方法一:如下情况导航在做普遍用法.前提是使用keep-a ...

  7. 解决：People下面选择分享可见联系人，选择多个联系人后通过短信分享，短信中只显示一个联系人

    问题描述: [操作步骤]:People下导入导出中选择分享可见联系人,选择多个联系人后通过短信分享 [测试结果]:短信中只能显示一个联系人 [预期结果]:可以显示多个联系人 经过代码分析,从compo ...

  8. vue中使用qrcode，遇到两次渲染的问题

    1.安装 qrcodejs2: npm install qrcodejs2 --save 2.页面中引入: import QRCode from "qrcodejs2";   co ...

  9. vue中触发键盘事件的两种方法和如何自定义键位事件，完整代码！

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. ASP.NET MVC - 发布web应用程序、部署到IIS

    发布项目 右击项目 - 发布 选择IIS - 点击发布 发布方法 - 文件系统,目标位置 - 选择与项目所在目录不同的目录(也即,指定一个发布生成文件的目录),文件发布选项 - 不选 - 点击发布 安 ...

  2. java中的进程与线程及java对象的内存结构【转】

    原文地址:http://rainforc.iteye.com/blog/2039501   1.实现线程的三种方式:   使用内核线程实现     内核线程(Kernel Thread, KLT)就是 ...

  3. nginx使用https协议

    效果: nginx添加ssl模块 ./configure --with-http_ssl_module 生成证书 openssl genrsa -out ca.key 2048 openssl req ...

  4. PF部分代码解读

    // 单个粒子数据结构 typedef struct { // 粒子状态 pf_vector_t pose; // 粒子权重 double weight; } pf_sample_t; // Info ...

  5. [Kubernetes]CentOS7下Etcd集群搭建

    Etcd简要介绍 Etcd是Kubernetes集群中的一个十分重要的组件,用于保存集群所有的网络配置和对象的状态信息 Etcd构建自身高可用集群主要有三种形式: ①静态发现: 预先已知 Etcd 集 ...

  6. 【ARTS】01_13_左耳听风-20190204~20190210

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  7. 【转】Python之mmap内存映射模块（大文本处理）说明

    [转]Python之mmap内存映射模块(大文本处理)说明 背景: 通常在UNIX下面处理文本文件的方法是sed.awk等shell命令,对于处理大文件受CPU,IO等因素影响,对服务器也有一定的压力 ...

  8. valgrind--内存泄漏检测（转）

    Valgrind 概述 体系结构 Valgrind是一套Linux下,开放源代码(GPL V2)的仿真调试工具的集合.Valgrind由内核(core)以及基于内核的其他调试工具组成.内核类似于一个框 ...

  9. python3+requests库框架设计06-测试脚本

    在项目下新建TestCase文件夹,然后新建.py文件在文件中写关于接口具体的测试脚本,一般我喜欢按照模块来分,一个模块一个.py文件,建议以test开头命名文件 把配置文件改成这样 url:http ...

  10. Flask请求流程超清大图

    补充一下 request是在哪里产生的: class RequestContext(object): # app就是flask对象 self.app = app if request is None: ...