vue之父組件向子組件傳值并改變子組件的樣式
更新時(shí)間：2022年12月24日 08:44:17 作者：貓兒念你
這篇文章主要介紹了vue之父組件向子組件傳值并改變子組件的樣式,需要的朋友可以參考下
問(wèn)題描述：在做視頻網(wǎng)站過(guò)程中發(fā)現(xiàn)每個(gè)視頻的樣式其實(shí)是大致相同的，所以就想著直接寫個(gè)組件，但是又看不懂官網(wǎng)的傳值，所以自己找了個(gè)視頻看明白了。
想實(shí)現(xiàn)的效果：
vue父組件向子組件傳值具體實(shí)現(xiàn)代碼：
父組件的代碼：
<!-- 注釋的部分是之前沒有用組件的代碼 -->
<!-- <ul class="videoList">
<li v-for="item in videoList" :key="item.id" class="videoItem">
<el-card :body-style="{ padding: '0px' }">
<img :src="item.src" class="image">
<div style="padding: 14px;">
<span class="videoTitle">{{ item.title }}</span>
<div class="bottom clearfix">
<span class="left" style="cursor: pointer;" @click="anchorDetail">{{ item.author }}</span>
<span class="right">{{ item.count }}人在看</span>
</div>
</div>
</el-card>
</li>
</ul> -->
<!-- 用組件之后的代碼 -->
<Video v-bind:newlists="videoList"></Video>
父組件中要定義好videoList
import Video from '@/components/frontend/videoItem'
export default {
components: {
Video
},
data(){
return {
videoList: [{
id: 0,
title: "最美的官方",
author: "貝殼官方",
count: 300,
src: require('../../../assets/img/homepage/1.png')
},
{
id: 1,
title: "最美的官方哈哈哈啊哈哈哈哈哈哈美的官方哈哈哈啊哈哈哈哈哈哈",
author: "貝殼官方",
count: 300,
src: require('../../../assets/img/homepage/1.png')
}, {
id: 2,
title: "最美的官方",
author: "貝殼官方",
count: 300,
src: require('../../../assets/img/homepage/1.png')
}, {
id: 3,
title: "最美的官方",
author: "貝殼官方",
count: 300,
src: require('../../../assets/img/homepage/1.png')
}, {
id: 4,
title: "最美的官方",
author: "貝殼官方",
count: 300,
src: require('../../../assets/img/homepage/1.png')
}, {
id: 5,
title: "最美的官方",
author: "貝殼官方",
count: 300,
src: require('../../../assets/img/homepage/1.png')
}, {
id: 6,
title: "最美的官方",
author: "貝殼官方",
count: 300,
src: require('../../../assets/img/homepage/1.png')
}, {
id: 7,
title: "最美的官方",
author: "貝殼官方",
count: 300,
src: require('../../../assets/img/homepage/1.png')
}
]
}
}
子組件代碼：
<template>
<ul class="videoList">
<li v-for="item in newlists" :key="item.id" class="videoItem">
<el-card :body-style="{ padding: '0px' }">
<img :src="item.src" class="image">
<div style="padding: 14px;">
<span class="videoTitle">{{ item.title }}</span>
<div class="bottom clearfix">
<span class="left" style="cursor: pointer;" @click="anchorDetail">{{ item.author }}</span>
<span class="right">{{ item.count }}人在看</span>
</div>
</div>
</el-card>
</li>
</ul>
</template>
<script>
export default {
// 父組件傳過(guò)來(lái)的數(shù)據(jù)
props: [
"newlists"
],
// 自己的數(shù)據(jù)
data() {
return {
}
},
methods: {
anchorDetail() {
this.$router.push('/anchor')
}
}
}
</script>
<style scoped="scoped">
/deep/.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
box-shadow: none;
}
.videoList {
display: flex;
flex-flow: wrap;
justify-content: space-between;
}
.videoList .videoItem {
width: 17.1875rem;
margin-bottom: 10px;
}
.videoItem .image {
width: 17.1875rem;
height: 12.5rem;
}
.videoTitle {
font-size: 14px;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
width: 245px;
}
.bottom {
font-size: 14px;
}
.bottom .left {
float: left;
}
.bottom .right {
float: right;
}
</style>
父組件中只要定義好<Video v-bind:newlists="videoList"></Video>中的videoList，并且把子組件導(dǎo)入進(jìn)來(lái)就ok。
子組件需要props: [ "newlists" ],并且將v-for中的list改為newlists 即可。
vue父組件改變子組件的樣式
問(wèn)題描述：有時(shí)候我們可以需要將某些經(jīng)常運(yùn)用的部分抽成組件，但是有很少的部分樣式是不同的，這時(shí)候就需要更改父組件中子組件的樣式。
1. 直接將style標(biāo)簽上的scoped屬性去掉【不推薦，有可能影響全局樣式】
<style scoped="scoped"> </style>
2. 新添加一個(gè)style樣式標(biāo)簽
<style> </style> //原來(lái)的style <style scoped="scoped"> </style>
3. 直接在原來(lái)的style中添加樣式，并在樣式前面加上/deep/
但是注意，要更改某些屬性時(shí)可以更改不了，因?yàn)檫@個(gè)只能更改當(dāng)前組件中的樣式，而有些樣式是全局的。
<style scoped>
/deep/.list{
color:#ccc;
}
</style>
以上就是vue之父組件向子組件傳值并改變子組件的樣式的詳細(xì)內(nèi)容，更多關(guān)于vue父組件向子組件傳值并改變子組件的樣式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue 使用async寫數(shù)字動(dòng)態(tài)加載效果案例
這篇文章主要介紹了vue 使用async寫數(shù)字動(dòng)態(tài)加載效果案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了vue如何實(shí)現(xiàn)自定義步驟條問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了Vue項(xiàng)目中使用Vux的安裝過(guò)程,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue2 添加數(shù)據(jù)可視化支持的方法步驟,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了vue中常用的幾種表單rules驗(yàn)證方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
這篇文章主要介紹了Vue中的生命周期詳細(xì)解讀,每個(gè) Vue 組件實(shí)例在創(chuàng)建時(shí)都需要經(jīng)歷一系列的初始化步驟，比如設(shè)置好數(shù)據(jù)偵聽，編譯模板，掛載實(shí)例到 DOM，以及在數(shù)據(jù)改變時(shí)更新 DOM,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了解決vue-pdf查看pdf文件及打印亂碼的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
為vue項(xiàng)目自動(dòng)設(shè)置請(qǐng)求狀態(tài)的配置方法
這篇文章主要介紹了vue項(xiàng)目自動(dòng)設(shè)置請(qǐng)求狀態(tài)的配置方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
vue-cli3項(xiàng)目升級(jí)到vue-cli4 的方法總結(jié)
這篇文章主要介紹了vue-cli3項(xiàng)目升級(jí)到vue-cli4 的方法總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue項(xiàng)目中jsonp跨域獲取qq音樂(lè)首頁(yè)推薦問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中jsonp跨域獲取qq音樂(lè)首頁(yè)推薦問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05