解决方法：　　

定义了两个 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. okhttp3与旧版本okhttp的区别分析

    https://www.jianshu.com/p/4a8c94b239b4  待总结学习

  2. python模块-----time

    说明 time模块提供各种时间相关的功能 与时间相关的模块有:time,datetime,calendar 这个模块的功能不是适用于所有的平台 这个模块中定义的大部分函数是调用C平台上的同名函数实现 ...

  3. 刷题之路第三题--Longest Substring Without Repeating Characters

    问题简介:求给定字符串中最长的字符不重复的字符串的长度 问题详解: 给定一个字符串,寻找给定字符串中包含的最长的字符不重复的字符串的长度 注:答案必须是子字符串,不是子序列 是连续的字符不重复的字符串 ...

  4. protobuf 安装与卸载

    方法一:可以FQ 安装 下载https://github.com/google/protobuf/releases ##Source code (zip)## ./autogen.sh ./confi ...

  5. java中equals，hashcode和==的区别

    https://www.cnblogs.com/kexianting/p/8508207.html

  6. Spring Resource配置

    1-classpath的设置: 2-Resource类型 3-ResourceLoader接口 加载resource的接口,只有一个方法getResource().所有ApplicationConte ...

  7. 【转】python 内置函数总结（大部分）

    [转]python 内置函数总结(大部分) python 内置函数大讲堂 python全栈开发,内置函数 1. 内置函数 python的内置函数截止到python版本3.6.2,现在python一共为 ...

  8. python使用pudb调试

    pudb是pdb的升级版本 安装 pip3 install pudb 使用方法 在程序文件的开头导入包 from pudb import set_trace set_trace()#断点位置 运行的时 ...

  9. python3+selenium入门05-元素操作及常用方法

    学习了元素定位之后,来看一些元素的操作,还有一些常用的方法 clear()清空输入框内容 click()点击 send_keys()键盘输入 import time from selenium imp ...

  10. 休眠与开机自动运行等VC代码

    //根据文件句柄,获取文件名 #include <windows.h> #include <stdio.h> #include <tchar.h> #include ...