元件的切換有兩種方式,第一種使用v-if和v-else進行切換,第二種是使用標籤名component來實現切換。
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
/title>
<
/head>
>
"" @click.prevent=
"flag = !flag"
>登入<
/a>
"" @click.prevent=
"flag = !flag"
>註冊<
/a>
"flag"
>
<
/login>
else
="flag"
>
<
/register>
<
/div>
"">
<
/script>
newvue(,
methods:
, components:
, register:},
});<
/script>
<
/body>
<
/html>
使用v-if和v-else進行切換方式可以實現元件的切換,但是最多只能有2個,有一定的侷限性。
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
/title>
<
/head>
>
"" @click.prevent=
"comname = 'login'"
>登入<
/a>
"" @click.prevent=
"comname = 'register'"
>註冊<
/a>
<
!-- vue提供了component,來展示對應名稱的元件 --
>
<
!-- component是乙個佔位符,
:is屬性,用來指定要展示的元件的名稱 --
>
"comname"
>
<
/component>
<
/div>
"">
<
/script>
newvue(,
methods:
, components:
, register:},
});<
/script>
<
/body>
<
/html>
使用
進行切換,只需要修改comname的值則可以切換成對應名稱的元件,沒有數量上的限制,可以替換成任何元件。
使用v-if和v-else進行切換,只能進行兩個元件的切換;使用標籤component來實現切換,可以切換成任何元件,第二種更為通用,推薦使用。
如何實現乙個自定義元件,不同元件之間如何通訊?
元件需要註冊後才可以使用,有全域性註冊和區域性註冊兩種方式 在例項建立前通過 來註冊全域性元件,不必把每個元件都註冊到全域性,在例項中,使用components選項可以區域性註冊元件,註冊後的元件只有在該例項作用域下有效,元件中也可以使用components選項來註冊元件,使元件可以巢狀。元件關係可...
Vue之元件切換
先看效果 兩種方法 1 使用v show來實現元件切換 flag flag button list v show flag showtable list v show flag showlist 利用v show的顯示隱藏來實現列表和 之間的切換 列表和 的模板定義 showtable 編號 td ...
vuejs幾種不同元件(頁面)間傳值的方式
在應用複雜時,推薦使用vue官網推薦的vuex,以下討論簡單spa中的元件間傳值。一 路由傳值 路由物件如下圖所示 在跳轉頁面的時候,在js 中的操作如下,在標籤中使用標籤 this.router.push 需要注意的是,實用params去傳值的時候,在頁面重新整理時,引數會消失,用query則不會...