Introduction à deux façons d'implémenter la commutation de composants dans Vue (avec code)-js tutoriel-php.cn

Introduction à deux façons d'implémenter la commutation de composants dans Vue (avec code)

不言

Libérer： 2018-08-08 11:54:57

original

4573 Les gens l'ont consulté

Ce que cet article vous apporte est une introduction aux deux façons d'implémenter le changement de composant dans Vue (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Plusieurs façons de changer de composant dans Vue

Méthode 1 : v-if 和 v-else 结合使用实现切换

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script rel="script" src="js/vue-2.4.0.js"></script></head><body>
    <div id="app">
        <a href="" @click.prevent="flag=true">登陆</a>
        <a href="" @click.prevent="flag=false">注册</a>

        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div><script>
    *<!--定义登录组件-->*
    Vue.component(&#39;login&#39;,{
        template :&#39;<h3>登陆组件</h3>&#39;
    });

     *<!--定义注册组件-->*
    Vue.component(&#39;register&#39;,{
        template :&#39;<h3>注册组件</h3>&#39;
    });

     *<!--创建Vue实例-->*
    var vm = new Vue({
       el : &#39;#app&#39;,
       data :{
           flag : true,
       },
       methods:{},
    });</script></body></html>

Copier après la connexion

Résultats d'exécution : 点击登录或注册进入相应的组件模块

Introduction à deux façons dimplémenter la commutation de composants dans Vue (avec code)

Remarque : Utilisez v-if et v-else pour basculer, vous ne pouvez basculer qu'entre deux composants. les composants ne peuvent pas être obtenus

Méthode 2 : 使用Vue提供的component元素实现组件切换

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script rel="script" src="js/vue-2.4.0.js"></script></head><body>
    <div id="app2">
        <!-- 链接修改comName的值-->
        <a href="" @click.prevent="comName = &#39;login&#39; ">登陆2</a>
        <a href="" @click.prevent="comName = &#39;register&#39; ">注册2</a>

        <!--
            component 是一个占位符，  :is  属性，可以用来指定要展示的组件的名称
        -->
        <component :is=" comName "></component>
    </div><script>
    //组件名称是 字符串
    Vue.component(&#39;login&#39;,{
        template :&#39;<h3>登陆组件</h3>&#39;
    })

    Vue.component(&#39;register&#39;,{
        template :&#39;<h3>注册组件</h3>&#39;
    })    //实例
    var vm2 = new Vue({
        el : &#39;#app2&#39;,
        data :{
            comName : &#39;login&#39;,//当前 component 中的 :is 帮i的那个的组件的名称
        },
        methods:{},
    });</script></body></html>

Copier après la connexion

Cette méthode peut définir une commutation de plusieurs composants, il convient de noter que 组件名称要对应