解决方法：　　

定义了两个 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. Eclipse安装教程 ——史上最详细安装Java &Python教程说明

    参考链接:https://blog.csdn.net/zichen_ziqi/article/details/73995755

  2. linux系统内核版本升级

    一.查看Linux内核版本命令(2种方法): 1.cat /proc/version 2.uname -a 二.查看Linux系统版本的命令(3种方法): 1.lsb_release -a 即可列出所 ...

  3. GridView item设置点击背景

    GridView item设置点击背景 android:listSelector="@android:color/transparent"

  4. launch 文件的写法

    1. launch文件的写法 ❀标签          ☺<node> 启动一个节点          ☺ <param> 设置参数服务器的参数          ☺ < ...

  5. CF1139A Even Substrings

    题目地址:CF1139A Even Substrings 一个数是偶数等价于其最后一位为偶数(2/4/6/8/0) 从左往右扫一遍,如果一个数是奇数则直接跳过,偶数则加上它对答案的贡献 这里的贡献应该 ...

  6. [Kubernetes]关于K8s,你应该知道的一些东西

    Kubernetes概述 Kubernetes(也常称K8s,用8代替8个字符"ubernete"而成的缩写),是一个开源的,用于管理云平台中多个主机上的容器化应用. 它的一个核心 ...

  7. MFC修改对话框标题

    对话框标题栏内容为静态 直接在对话框属性"常规"的"Caption"中修改. 动态生成对话框标题栏内容 SetWindowText()函数就可以 CString ...

  8. 设计模式C++学习笔记之十三（Decorator装饰模式）

      装饰模式,动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活. 13.1.解释 main(),老爸 ISchoolReport,成绩单接口 CFourt ...

  9. 【转】Leveldb源码分析——1

    先来看看Leveldb的基本框架,几大关键组件,如图1-1所示. Leveldb是一种基于operation log的文件系统,是Log-Structured-Merge Tree的典型实现.LSM源 ...

  10. mysql查询sending data占用大量时间的问题处理

    问题描述:某条sql语句在测试环境执行只需要1秒不到,到了生产环境执行需要8秒以上 在phpmyadmin里面执行性能分析,发现sending data占用了差不多90%以上的时间 查询一下“Send ...