解决方法：　　

定义了两个 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. 基于netty的一款http server

    cicada 基本功能 1.基于注解.注解扫描 2.ioc 对象管理 3.intercepter 拦截器 ref https://github.com/TogetherOS/cicada

  2. AndroidStudio Terminal的使用

    gradlew  assembleDebug  --stacktrace 查看使用的依赖的 Execution failed for task ':app:transformClassesWithMu ...

  3. STL之heap学习

    C++标准库中的堆-heap make_heap函数,包括两个参数(begin(number),end(number)).(左闭右开) pop_heap函数,包括两个参数,起始位置和终止位置,将当前区 ...

  4. LaTeX IEEE模板

    因为课程作业的要求需要完成一篇IEEE格式的论文,所以选择入门LaTeX.但是期间遇到了各种各样莫名其妙的坑.前前后后挣扎了两个多星期终于完成了IEEE模板的设置.下面详细记录一下让我深恶痛绝的心路历 ...

  5. RabbitMQ应用场景

    1.背景 RabbitMQ是一个由erlang开发的AMQP(Advanved Message Queue)的开源实现. 2.应用场景 2.1异步处理 场景说明:用户注册后,需要发注册邮件和注册短信, ...

  6. oracle查看未提交事务

    SELECT s.sid, s.serial#, s.event, a.sql_text, a.sql_fulltext, s.username, s.status, s.machine, s.ter ...

  7. QR 编码原理（三）

    一.日本汉字(KANJI)是两个字节表示的字符码,编码的方式是将其转换为13字节的二进制码制. 转换步骤为: 1.对于JIS值为8140(hex) 到9FFC(hex)之间字符: a)将待转换的JIS ...

  8. UVA1194 Machine Schedule

    题目地址:UVA1194 Machine Schedule 二分图最小覆盖模型的要素 每条边有两个端点,二者至少选择一个.简称 \(2\) 要素. \(2\) 要素在本题中的体现 每个任务要么在 \( ...

  9. 数据库的OLE字段写入长二进制文件

    //'*************************************************************************************** //'函数:将数据 ...

  10. 【转】C++标准转换运算符const_cast

    const_cast转换符是用来移除变量的const或volatile限定符. 对于const变量,我们不能修改它的值,这是这个限定符最直接的表现.但是我们就是想违背它的限定希望修改其内容怎么办呢? ...