摘要:子組件通過就可以接受到這個(gè)父組件傳遞的值。點(diǎn)擊向父組件傳值在父組件中的標(biāo)簽中監(jiān)聽該自定義事件,并添加一個(gè)響應(yīng)該事件的方法。
1.環(huán)境搭建
下載 vue-cli:npm install -g vue-cli
初始化項(xiàng)目:vue init webpack vue-demo
進(jìn)入vue-demo文件夾:cd vue-demo
下載安裝依賴:npm install
運(yùn)行該項(xiàng)目:npm run dev
2.父組件向子組件傳值src/components/文件夾下建一個(gè)組件,Home.vue
創(chuàng)建子組件,在src/components/文件夾下新建一個(gè)文件夾,在新建文件夾中新建一個(gè)組件Child.vue
在Child.vue中創(chuàng)建props,用于接收父組件傳遞的值
{{key}}: {{item}}
在Home.vue中注冊(cè)Child組件,并在template的div標(biāo)簽中添加home-child標(biāo)簽,標(biāo)簽中使用v-bind指令綁定c。子組件通過props就可以接受到這個(gè)父組件傳遞的值。
結(jié)果
給按鈕綁定點(diǎn)擊事件ChildClick
在事件的函數(shù)中使用$emit來觸發(fā)一個(gè)自定義事件,并傳遞一個(gè)參數(shù),這個(gè)參數(shù)就是子組件要傳遞給父組件的值。
{{key}}: {{item}}{{data}}
在父組件中的home-child標(biāo)簽中監(jiān)聽該自定義事件,并添加一個(gè)響應(yīng)該事件的方法ShowChild。
結(jié)果:
點(diǎn)擊按鈕后:
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/96615.html
摘要:子組件通過就可以接受到這個(gè)父組件傳遞的值。點(diǎn)擊向父組件傳值在父組件中的標(biāo)簽中監(jiān)聽該自定義事件,并添加一個(gè)響應(yīng)該事件的方法。 1.環(huán)境搭建 下載 vue-cli:npm install -g vue-cli 初始化項(xiàng)目:vue init webpack vue-demo 進(jìn)入vue-demo文件夾:cd vue-demo 下載安裝依賴:npm install 運(yùn)行該項(xiàng)目:npm...
摘要:為此可以使用為子組件指定一個(gè)索引。訪問子組件當(dāng)和一起使用時(shí),是一個(gè)數(shù)組或?qū)ο?,包含相?yīng)的子組件。 父子通信目前有四種方式: 1.父組件傳遞數(shù)據(jù)給子組件父組件數(shù)據(jù)如何傳遞給子組件呢?可以通過props屬性來實(shí)現(xiàn)父組件: //這里必須要用 - 代替駝峰data(){ return { msg: [1,2,3] };} 子組件通過props來接收數(shù)據(jù):方式1:props: [childMs...
摘要:一父?jìng)髯咏M件通信拿當(dāng)父組件,當(dāng)子組件父組件中導(dǎo)入子組件子組件導(dǎo)出在父組件中注冊(cè)子組件子組件通過來接收數(shù)據(jù)二子與父組件通信子組件主動(dòng)觸發(fā)方法,為向父組件傳遞的數(shù)據(jù)父組件監(jiān)聽子組件觸發(fā)的事件然后調(diào)用方法二非父子組件通信把當(dāng)作一個(gè)中轉(zhuǎn)站組 一.父?jìng)髯咏M件通信 showImg(https://segmentfault.com/img/bV0l1v?w=168&h=134); 拿app.vue當(dāng)...
摘要:想使用值的話通過進(jìn)行處理非父子組件間通信創(chuàng)建事件中心組件觸發(fā)組件接收 1. 父組件與子組件通信 父組件showImg(https://segmentfault.com/img/remote/1460000013945460); 子組件通過props來接收數(shù)據(jù): 格式1: props: [childMsg] 格式2 : props: { childMsg: Array //指定...
摘要:前端知識(shí)點(diǎn)總結(jié)持續(xù)更新中框架和庫的區(qū)別框架有著自己的語法特點(diǎn)都有對(duì)應(yīng)的各個(gè)模塊庫專注于一點(diǎn)框架的好處提到代碼的質(zhì)量,開發(fā)速度提高代碼的復(fù)用率降低模塊之間的耦合度高內(nèi)聚低耦合思維模式的轉(zhuǎn)換從操作的思維模式切換到以數(shù)據(jù)為主概述是一個(gè)漸進(jìn)式的構(gòu)建 前端知識(shí)點(diǎn)總結(jié)——VUE(持續(xù)更新中) 1.框架和庫的區(qū)別: 框架:framework 有著自己的語法特點(diǎn)、都有對(duì)應(yīng)的各個(gè)模塊庫 library ...
閱讀 1937·2023-04-25 23:28
閱讀 670·2023-04-25 22:49
閱讀 2412·2021-09-27 13:34
閱讀 5412·2021-09-22 15:09
閱讀 3671·2019-08-30 12:52
閱讀 2805·2019-08-29 15:26
閱讀 710·2019-08-29 11:12
閱讀 2254·2019-08-26 12:24