在Vue中使用Vue.component定义两个全局组件将组件应用于单个标签时只会显示一个组件的问题和$emit的使用情况

顺晟科技

2022-09-13 11:19:18

199

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>

使用单标签引用组件时，效果图：

使用双标签引用组件时，效果图：

上一篇：什么事：视图何曰QQ jssdk□对下一篇：vue @click使用三眼运算(实

网站建设

Js

在Vue中使用Vue.component定义两个全局组件将组件应用于单个标签时只会显示一个组件的问题和$emit的使用情况

Js

在Vue中使用Vue.component定义两个全局组件 将组件应用于单个标签时 只会显示一个组件的问题和$emit的使用情况

在Vue中使用Vue.component定义两个全局组件将组件应用于单个标签时只会显示一个组件的问题和$emit的使用情况