Vue教程10 元件 切換

2021-10-04 23:08:14 字數 2087 閱讀 4825

登入a>

href="

" @click.prevent

="flag=false"

>

註冊a>

v-if

="flag"

>

login

>

v-else

>

register

>

div>

>

// 建立登入的元件

vue.

component

("login",)

// 建立註冊的元件

vue.

component

("register",)

var vm =

newvue(,

methods:})

script

>

body

>

html

>

除了上面介紹的這種方式以外我們還可以通過vue元件中給我們提供的乙個component標籤來實現

vue提供了 component 來展示對應名稱的元件,component 是乙個佔位符, :is 屬性,可以用來指定要展示的元件的名稱

登入a>

href="

" @click.prevent

="comname='register'

">

註冊a>

:is=

"comname"

>

component

>

div>

>

// 建立登入的元件

vue.

component

("login",)

// 建立註冊的元件

vue.

component

("register",)

var vm =

newvue(,

methods:})

script

>

body

>

html

>

VUE 元件(二)元件通訊

元件關係可分為父子元件通訊 兄弟元件通訊 跨級元件通訊。一 自定義事件 當子元件向父元件傳遞資料時,就要用到自定義事件 子元件用 emit 來觸發事件,父元件用 on 來監聽子元件事件 通過兩個按鈕實現 1 1的效果,在改變元件data中的count後,通過 emit 將值傳給父元件,父元件用v o...

Vue入門(2)元件

元件是可復用的 vue 例項,且帶有乙個名字。元件是vue.js最強大的功能之一。元件可以擴充套件html元素,封裝可重用的 在較高層面上,元件是自定義的元素,vue.js的編譯器為它新增特殊功能。在有些情況下,元件也可以是原生html元素的形式,以is特性擴充套件。1.區域性元件的建立 div 區...

Vue入門3 元件

1 區域性元件 元件的定義模式可以直接在程式裡面採用html字串的方式進行定義,先進行乙個區域性元件的定義,所謂區域性元件指的是針對於某個vue物件定義的。js el msgdiv components html 執行結果 2 全域性元件 以上所定義的元件只能夠在當前vue物件使用,所以按照習慣性的...