Vue中使用Vue.component定义两个全局组件,用单标签应用组件时,只显示一个组件的问题和 $emit的使用。...

解决方法:  

定义了两个 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>

使用单标签引用组件时,效果图:

 

 

使用双标签引用组件时,效果图:

 

转载于:https://www.cnblogs.com/taohuaya/p/10233033.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值