vue父組件與子組件之間的數(shù)據(jù)交互方式詳解
一、前端項(xiàng)目目錄結(jié)構(gòu)
二、vue單文件組件格式
注意1: scoped表示對(duì)當(dāng)前組件生效
<style scoped>
</style>
這個(gè)是設(shè)置組件中html樣式(css)的地方
style中加入scoped屬性,表示style中設(shè)置的樣式,只對(duì)當(dāng)前組件生效
注意2:整個(gè)項(xiàng)目中多個(gè)組件共用的css寫在assets中
main.js中導(dǎo)入全局css文件,才可以生效
import './assets/css/global.css'
注意3:
<template></template>
:定義組件中的html模板的<script></script>
:這里是寫組件中js代碼的<style></style>
:這個(gè)是設(shè)置組件中html樣式(css)的地方export default
:默認(rèn)導(dǎo)入data():
定義組件中的屬性methods:
定義組件中的方法computed:
定義組件中的計(jì)算屬性watch:
定義組件中的偵聽(tīng)器components:
注冊(cè)局部組件created:
生命周期鉤子函數(shù)(組件對(duì)象創(chuàng)建(初始化)完畢之后執(zhí)行)mounted:
生命周期鉤子函數(shù)(組件數(shù)據(jù)掛載完畢之后執(zhí)行)
<!--這個(gè)是組件的html(模板)--> <template> <div class="box"> 這個(gè)是demo組件 </div> </template> <script> 這里是寫組件中js代碼的 export default{ //data中定義組件屬性 data(){ return{ } }, //定義組件中的方法 methods:{ }, //定義組件中的計(jì)算屬性 computed:{ }, //定義組件中的偵聽(tīng)器 watch:{ }, //注冊(cè)局部組件 components:{ }, //生命周期鉤子函數(shù) created(){ //組件對(duì)象創(chuàng)建(初始化)完畢之后執(zhí)行 }, mounted(){ //組件數(shù)據(jù)掛載完畢之后執(zhí)行 } } </script> <!--這個(gè)是設(shè)置組件中html樣式(css)的地方 style中加入scoped屬性,表示style中設(shè)置的樣式,只對(duì)當(dāng)前組件生效 --> <style scoped> .box{ width:100px; height: 100px; background: red; } </style>
三、js導(dǎo)入語(yǔ)法
注意4:
js中要使用import xx from xx 去導(dǎo)入js文件或者vue文件里面的內(nèi)容
前提是文件中內(nèi)容必須指定導(dǎo)出的內(nèi)容
import xx from xxx
例如js文件內(nèi)容如下
var a=100 var b='ttt' var c={ 'name':'kobe', 'age':18 }
方式一:暴露多個(gè)變量
在js中導(dǎo)出(暴露)內(nèi)容
export a export c
在其他js文件或者vue文件中要導(dǎo)入a和c的時(shí)候
import {a,c} from 'xxx/xxx/data.js'
方式二:暴露(導(dǎo)出)一個(gè)默認(rèn)的對(duì)象
export default{ a:a, b:b, 'kobe':'kobe' }
在其他的js或者vue文件中使用時(shí),導(dǎo)入的方式
import ABC(變量,可以起任意的名字) from ‘xxx/xxx/xx.js’
import datas from 'xxx/xx/data.js'
案例1:導(dǎo)入組件
四、父組件和子組件
層級(jí)關(guān)系
五、父組件往子組件中傳數(shù)據(jù)(組件屬性)
效果展示:stu1中的參數(shù)固定,不能動(dòng)態(tài)變化,缺點(diǎn)很明顯
子組件
<template> <h1>班級(jí){{cls}}</h1> <table border="1"> <tr> <th>學(xué)號(hào)</th> <th>年領(lǐng)</th> <th>名字</th> </tr> <tr v-for="item in stu1"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> </table> </template> <script> export default{ data(){ return{ cls:"python1", stu1:[ {id:1,name:'zs',age:18}, {id:2,name:'lisi',age:19}, {id:3,name:'ww',age:17} ] } } } </script> <style> </style>
父組件(App)
<template> <!-- demo組件 --> <!-- <demo></demo> --> <mtable></mtable> </template> <script> import demo from './components/demo.vue'; import mtable from './components/MyTable.vue'; export default { name: 'App', components: { demo, mtable } }; </script> <style> </style>
效果展示:參數(shù)不固定,可以動(dòng)態(tài)變化
實(shí)現(xiàn)步驟
1、子組件內(nèi)部定義props接收傳遞過(guò)來(lái)的值
props:父組件在使用時(shí)給子組件中的屬性傳遞的值;
props:[‘cls’,‘stu1’]:表示父組件中定義的值傳給子組件中的cls和stu1
2、父組件在使用子組件時(shí)通過(guò)屬性將值傳遞給子組件
子組件
<template> <h1>班級(jí){{cls}}</h1> <table border="1"> <tr> <th>學(xué)號(hào)</th> <th>年領(lǐng)</th> <th>名字</th> </tr> <tr v-for="item in stu1"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> </table> </template> <script> export default{ data(){ return{ } }, props:['cls','stu1'] } </script> <style> </style>
父組件(App)
<template> <!-- demo組件 --> <!-- <demo></demo> --> <!-- <mtable></mtable> --> <mtable1 cls="python2" v-bind:stu1='stu1'></mtable1> <mtable1 cls="python3" v-bind:stu1='stu2'></mtable1> </template> <script> import demo from './components/demo.vue'; import mtable from './components/MyTable.vue'; import mtable1 from './components/MyTable1.vue'; export default { name: 'App', data(){ return{ stu1:[ {id:1,name:'zs',age:18}, {id:2,name:'lisi',age:19}, {id:3,name:'ww',age:17} ], stu2:[ {id:3,name:'zs',age:18}, {id:4,name:'lisi',age:19}, {id:5,name:'ww',age:17} ], } }, components: { demo, mtable, mtable1 } }; </script> <style> </style>
特別注意:子組件中不能操作父組件中傳遞過(guò)來(lái)的數(shù)據(jù),只能訪問(wèn)
六、子組件往父組件中傳數(shù)據(jù)(組件事件)
原則:在子組件中最好不要修改父組件中傳遞過(guò)來(lái)的數(shù)據(jù);數(shù)據(jù)源在那個(gè)組件中,刪除操作就在那個(gè)組件中進(jìn)行刪除
實(shí)現(xiàn)步驟:
1、子組件中定義一個(gè)事件
emit:['delete'], methods:{ //觸發(fā)組件的delete事件 delRow(index){ this.$emit('delete',index) }
子組件
當(dāng)點(diǎn)擊刪除操作的時(shí)候
子組件中會(huì)執(zhí)行 @click="delRow(index)"這個(gè)函數(shù)
<template> <h1>班級(jí){{cls}}</h1> <table border="1"> <tr> <th>學(xué)號(hào)</th> <th>年領(lǐng)</th> <th>名字</th> <th>操作</th> </tr> <tr v-for="(item,index) in stu1"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td><button @click="delRow(index)">刪除</button></td> </tr> </table> </template> <script> export default{ data(){ return{ } }, //定義組件的屬性(父組件使用時(shí)傳遞的屬性) props:['cls','stu1'], //自定義組件的事件 emit:['delete'], methods:{ // delRow(index){ //原則:在子組件中最好不要修改父組件中傳遞過(guò)來(lái)的數(shù)據(jù) //index是要?jiǎng)h除數(shù)據(jù)的索引 // } //觸發(fā)組件的delete事件 delRow(index){ this.$emit('delete',index) } } } </script> <style> </style>
父組件
執(zhí)行步驟:
父組件往子組件中傳遞cls和stu1值
監(jiān)聽(tīng)delete事件,當(dāng)delete事件被觸發(fā)時(shí),會(huì)執(zhí)行后面綁定的方法del
<template> <!-- demo組件 --> <!-- <demo></demo> --> <!-- <mtable></mtable> --> <!-- <mtable1 cls="python2" v-bind:stu1='stu1'></mtable1> --> <!-- <mtable1 cls="python3" v-bind:stu1='stu2'></mtable1> --> <mtable2 @delete='del' cls='py6' :stu1="stu1"></mtable2> <slotdemo> <h3>111</h3> </slotdemo> </template> <script> import demo from './components/demo.vue'; import mtable from './components/MyTable.vue'; import mtable1 from './components/MyTable1.vue'; import mtable2 from './components/MyTable2.vue'; import slotdemo from './components/SlotDemo.vue'; export default { name: 'App', data(){ return{ stu1:[ {id:1,name:'zs',age:18}, {id:2,name:'lisi',age:19}, {id:3,name:'ww',age:17} ], stu2:[ {id:3,name:'zs',age:18}, {id:4,name:'lisi',age:19}, {id:5,name:'ww',age:17} ], } }, methods:{ // del:function(index){ // this.stu1.splice(index,1) // } del(index){ this.stu1.splice(index,1) } }, components: { demo, mtable, mtable1, mtable2, slotdemo } }; </script> <style> </style>
拓展
通過(guò)組件之間數(shù)據(jù)可知:
父組件向子組件img傳遞了src和alt數(shù)據(jù)
子組件中使用props進(jìn)行接收
<img src="" alt=""/>
子組件中含有click事件,emit:[‘delete’],
子組件向父組件傳遞delete事件
<button @click="xxx"></button>
總結(jié)
到此這篇關(guān)于vue父組件與子組件之間的數(shù)據(jù)交互方式的文章就介紹到這了,更多相關(guān)vue父組件與子組件數(shù)據(jù)交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3.0 子組件如何修改父組件傳遞過(guò)來(lái)的值
- 詳解Vue3?父組件調(diào)用子組件方法($refs?在setup()、<script?setup>?中使用)
- vue父組件調(diào)用子組件方法報(bào)錯(cuò)問(wèn)題及解決
- vue父組件異步傳遞props值,子組件接收不到解決方案
- vue3子組件如何修改父組件傳過(guò)來(lái)的props數(shù)據(jù)
- Vue?通過(guò)this.$emit()方法子組件向父組件傳值(步驟分享)
- Vue中子組件向父組件傳值以及.sync修飾符詳析
- Vue父組件和子組件之間數(shù)據(jù)傳遞和方法調(diào)用
- vue之父組件向子組件傳值并改變子組件的樣式
相關(guān)文章
vue項(xiàng)目報(bào)錯(cuò)Extra?semicolon?(semi)問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目報(bào)錯(cuò)Extra?semicolon?(semi)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))
這篇文章主要介紹了VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié)),文中通過(guò)圖文表格介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例
今天小編就為大家分享一篇vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vue.js 實(shí)現(xiàn)點(diǎn)擊按鈕動(dòng)態(tài)添加li的方法
今天小編就為大家分享一篇vue.js 實(shí)現(xiàn)點(diǎn)擊按鈕動(dòng)態(tài)添加li的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue echarts實(shí)現(xiàn)綁定事件和解綁事件
這篇文章主要介紹了vue echarts實(shí)現(xiàn)綁定事件和解綁事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06