解决方法：　　

定义了两个 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. sql常用问题(一)

    一.sql要掌握 1.sum select  sum(score) from table 2.group select name, sum(score) from table group by 3.a ...

  2. Binary Tree HDU - 5573 （思维）

    题目链接: B - Binary Tree  HDU - 5573 题目大意: 给定一颗二叉树,根结点权值为1,左孩子权值是父节点的两倍,右孩子是两倍+1: 给定 n 和 k,让你找一条从根结点走到第 ...

  3. apache基础学习

    1,apache是什么? 目前最主流的三个Web服务器是Apache Nginx IIS 2,环境搭建 linux系统安装xampp: 先下载xampp for linux,放在/opt文件夹下,程序 ...

  4. 【ARTS】01_19_左耳听风-20190318~20190324

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

  5. 【sql inject】sql盲注技巧

    SAMPLE 知识点 使用 AND 1 = 1 / 1 或者 1 = 1 / 0 判断是否存在注入,如果正确就会返回页面,如果错误就是1/0语法错误使得页面报错: queueID = 743994 A ...

  6. python3.7 contextvars在asyncio使用的

    from contextvars import ContextVar import asyncio import random cv = ContextVar('cv') async def wait ...

  7. $.each() 与 $(selector).each()的区别

    $.each( dataArr,function(i,item){}) 可用于遍历任何的集合(无论是数组或对象).  如果是数组,回调函数每次传入数组的索引(也就是i)和对应的值(item)(值亦可以 ...

  8. C语言 16进制转float

    float hex_to_float(uint8_t *data) { float num = 0.0; uint8_t dd[4] = {data[0], data[1], data[2], dat ...

  9. page_cleaner: 1000ms intended loop took 4724ms. The settings might not be optimal. (flushed=1037, during the time.)

    2018-07-09T14:28:56.853600Z 0 [Note] InnoDB: page_cleaner: 1000ms intended loop took 4724ms. The set ...

  10. [POSIX]文件系统（概述）

    1.文件名由除系统目录分隔符(unix是/,windows是\)和空字符“\0”外的任意ASCII字符组成,现代系统很多还可以包含UNICODE字符,但是还是推荐使用传统的ASCII码命名. 2.目录 ...