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)文章
Vue2+Echarts封裝組件之專注邏輯,圖表生成自動(dòng)化方式
文章介紹了使用Vue2封裝的Echarts圖表組件,簡(jiǎn)化了圖表的生成和渲染過(guò)程,提供了多種圖表類型和交互功能,提高了開(kāi)發(fā)效率,幫助開(kāi)發(fā)者專注于業(yè)務(wù)邏輯的開(kāi)發(fā)2025-02-02
這篇文章主要介紹了vue-cli3搭建項(xiàng)目的詳細(xì)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue3實(shí)現(xiàn)圖片縮放拖拽功能的示例代碼
v3-drag-zoom 是基于 vue3 開(kāi)發(fā)的一個(gè)縮放拖拽組件,方便開(kāi)發(fā)者快速實(shí)現(xiàn)縮放拖拽功能,效果類似地圖的縮放與拖拽,本文給大家介紹了vue3如何快速實(shí)現(xiàn)圖片縮放拖拽功能,感興趣的朋友可以參考下2024-04-04
五分鐘教你使用vue-cli3創(chuàng)建項(xiàng)目(新手入門)
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue中的事件綁定與解綁方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
測(cè)試平臺(tái)開(kāi)發(fā)vue組件化重構(gòu)前端代碼
這篇文章主要為大家介紹了測(cè)試平臺(tái)開(kāi)發(fā)vue組件化重構(gòu)前端代碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
本篇文章主要介紹了開(kāi)發(fā)Vue樹(shù)形組件的示例代碼，它展現(xiàn)了組件的遞歸使用。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
vue使用keep-alive后從部分頁(yè)面進(jìn)入不緩存示例詳解
這篇文章主要給大家介紹了關(guān)于vue使用keep-alive后從部分頁(yè)面進(jìn)入不緩存的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
Vue單頁(yè)應(yīng)用引用單獨(dú)的樣式文件的兩種方式
這篇文章給大家介紹Vue單頁(yè)應(yīng)用如何引用單獨(dú)的樣式文件，本文以css文件為例，通過(guò)兩種方式給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-03-03
本文主要介紹了vue中使用scrollTo無(wú)效的解決方法，想要使用scrollTo使當(dāng)前網(wǎng)頁(yè)滾動(dòng)到指定位置，本文就來(lái)解決一下，具有一定的 參考價(jià)值，感興趣的可以了解一下2023-08-08