Vue中的元件通訊

2022-02-14 04:44:29 字數 1408 閱讀 8862

這兩天在學vue,記錄一下我認為比較重要的東西

vue中的元件通訊:  

我們可以分為3個步驟來:

1.宣告區域性子元件,簡稱 "聲子",

2.掛載到dom樹上面去,簡稱:"掛子"

3.進行使用,簡稱:"用子"

上面寫的別人可能看不太明白,畢竟只是我的看法:

<

body

>

<

div

id>

div>

body

>

<

script

>

varvheard =

//聲子

var=

} varvm

=new

vue(

},components: ,

//用子

template: `

<

/>

` });

script

>

父元件向子元件傳遞資訊

子元件向父元件傳遞資訊

<

script

>

//孩子

vue.component(

'child',

},template: `

<

div>

我是孩子

<

p>

}<

/p>

<

input type='

text'v

-model='

textprop

'@input='

childvalue(textprop)'/

>

<

/div>

`, props: [

'childdata'],

methods: }})

//父親

vue.component(

'parent',

},template: `

<

div>

我是父親

<

child :childdata='

msg'

@childheard='

childheard'/

>

<

/div>

`, methods: }})

//聲子

var=

varvm

=new

vue(

},//用子

components: ,

//掛子

template: `

<

/>

` })

script

>

vue 元件中的通訊

改一些公司的之前的專案 每個人有每個人的寫 的習慣,我遇到的是 上個前端開發比較喜歡用元件化開發 在父元件中用 ref.元件名.xx的這種寫法,如圖 如上圖 getcommunityinfos這個函式觸發的時候 com id 改變了 如果用v if控制liveroom的展示時 當com id改變成不...

Vue中元件之間的通訊

元件 全域性自定義元件 在任何乙個例項中都可以使用 區域性自定義元件 只能在當前的例項中使用 1.乙個元件裡面只能對應乙個根標籤 2.元件裡面的內容寫成返回值的形式 元件的使用,就相當於自定義的標籤,元件的名稱就可以當成乙個自定義的標籤 全域性的元件 vue.component test compo...

Vue中父子元件通訊 元件todolist

提交 button div ul li v for item,index of list key index li ul div script newvue methods script view code 定義元件,元件和元件之間通訊 div id root div input type text...