vue組建通訊

父元件

<

template
>
<
div>
<
zi :str
="str"
@change_fu
="getzi"
>
zi>
<
button 
@click
="change_zi()"
>修改子元件的資料
button
>
} 
div>
template
>
<
script
>
import zi from 
'./zi
'export 
default
, data(),}},
methods:,
getzi(val)}}
script
>
<
style 
scoped
>
style
>

子元件

<

template
>
<
div>
<
li>
<
ul>ddddddddddhffyftdvhftgiugu
ul>
} 
<
button 
@click
="send_fu()"
>孝敬父親
button
>
li>
div>
template
>
<
script
>
export 
default}},
methods:}}
script
>
<
style 
scoped
>
style
>

⽗⼦元件的調⽤：

import 導⼊⼦元件

compants註冊⼦元件

註冊的⼦元件當做標籤來使⽤

⽗元件給⼦元件傳參：

⽗元件⾥的⼦標籤⾥寫上要傳遞的資料 （：⼦元件的引數名字=⽗元件的引數名字）

在⼦元件⾥註冊引數（props）

使⽤⽗元件傳過來的引數

⼦元件給⽗元件傳參：

⼦元件⾥先⽤特定的⽅法來把資料傳遞給⽗元件（ this.$emit("⽅法的名字"，要傳遞的資料)

）⽗元件的⼦標籤⾥來接收資料（@⼦元件的⽅法 = ⽗元件的⽅法）

在methods⾥接收傳過來的val並賦值。

vue監聽組建鍵盤事件

表單提交時需要處理輸入框的回車事件，一般的原生input標籤可以用 keyup.enter onsubmit tips onsubmit為定義的方法 但是在組建裡就不好用，需要多加乙個native，如下 keyup.enter onsubmit 改寫為 keyup.enter.native onsu...

react組建通訊之子傳父

import react from react import reactdom from react dom 元件之間的傳值 reactdom.render document.getelementbyid root import react,from react import footer from...

vue區域性組建和全域性組卷

公共元件全部放在src components 下 在src components 下建立 top.vue top 新建index.vue，匯入公共元件 獲取子元件資訊 公共元件全部放在src components 下 在src components 下建立 header.vue 頭部資訊，全域性元件...