집 > 기사 > 웹 프론트엔드 > Vue에서 컴포넌트 전환을 구현하는 두 가지 방법 소개(코드 포함)

Vue에서 컴포넌트 전환을 구현하는 두 가지 방법 소개(코드 포함)

不言원래의: 2018-08-08 11:54:574510검색

이 글은 Vue에서 (코드 포함) 컴포넌트 전환을 구현하는 두 가지 방법을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

Vue에서 구성 요소를 전환하는 여러 가지 방법

방법 1: v-if와 v-else를 함께 사용하여 전환을 달성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>

运行结果：点击登录或注册进入相应的组件模块

Vue에서 컴포넌트 전환을 구현하는 두 가지 방법 소개(코드 포함)

注意：使用 v-if 和 v-else 实现切换，只能在两个组件间相互切换，不能实现多个组件的切换

方式二： 使用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>

这种方式可以实现定义多个组件切换，需要注意的是，组件名称要对应rrreee

실행 결과: 로그인하려면 클릭하거나 해당 구성요소 모듈에 들어가려면 등록하세요

glow write 그렇지 않으면 전환할 수 있습니다. 여러 구성 요소가 아닌 두 구성 요소 간에만 전환할 수 있습니다.

방법 2: Vue에서 제공하는 구성 요소 요소를 사용하여 구성 요소를 전환하세요.rrreee

이 방법은 여러 구성 요소 전환을 정의하는 데 사용할 수 있습니다. 구성 요소 이름은 🎜🎜권장 관련 기사: 🎜🎜🎜노드 서버가 Douban 데이터 획득을 구현하는 방법( code)🎜🎜 🎜🎜vue는 Toutiao🎜🎜의 홈페이지 탭을 모방하는 기능을 구현합니다.

위 내용은 Vue에서 컴포넌트 전환을 구현하는 두 가지 방법 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：노드 서버는 어떻게 Douban 데이터(코드) 획득을 달성합니까?다음 기사：노드 서버는 어떻게 Douban 데이터(코드) 획득을 달성합니까?