vue之父組件向子組件傳值并改變子組件的樣式
更新時間：2022年12月24日 08:44:17 作者：貓兒念你
這篇文章主要介紹了vue之父組件向子組件傳值并改變子組件的樣式,需要的朋友可以參考下
問題描述：在做視頻網(wǎng)站過程中發(fā)現(xiàn)每個視頻的樣式其實是大致相同的，所以就想著直接寫個組件，但是又看不懂官網(wǎng)的傳值，所以自己找了個視頻看明白了。
想實現(xiàn)的效果：
vue父組件向子組件傳值具體實現(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 {
// 父組件傳過來的數(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，并且把子組件導入進來就ok。
子組件需要props: [ "newlists" ],并且將v-for中的list改為newlists 即可。
vue父組件改變子組件的樣式
問題描述：有時候我們可以需要將某些經(jīng)常運用的部分抽成組件，但是有很少的部分樣式是不同的，這時候就需要更改父組件中子組件的樣式。
1. 直接將style標簽上的scoped屬性去掉【不推薦，有可能影響全局樣式】
<style scoped="scoped"> </style>
2. 新添加一個style樣式標簽
<style> </style> //原來的style <style scoped="scoped"> </style>
3. 直接在原來的style中添加樣式，并在樣式前面加上/deep/
但是注意，要更改某些屬性時可以更改不了，因為這個只能更改當前組件中的樣式，而有些樣式是全局的。
<style scoped>
/deep/.list{
color:#ccc;
}
</style>
以上就是vue之父組件向子組件傳值并改變子組件的樣式的詳細內容，更多關于vue父組件向子組件傳值并改變子組件的樣式的資料請關注腳本之家其它相關文章！
相關文章
vue 使用async寫數(shù)字動態(tài)加載效果案例
這篇文章主要介紹了vue 使用async寫數(shù)字動態(tài)加載效果案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue如何實現(xiàn)自定義步驟條問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了Vue項目中使用Vux的安裝過程,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue2 添加數(shù)據(jù)可視化支持的方法步驟,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家詳細介紹了vue中常用的幾種表單rules驗證方式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-10-10
這篇文章主要介紹了Vue中的生命周期詳細解讀,每個 Vue 組件實例在創(chuàng)建時都需要經(jīng)歷一系列的初始化步驟，比如設置好數(shù)據(jù)偵聽，編譯模板，掛載實例到 DOM，以及在數(shù)據(jù)改變時更新 DOM,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了解決vue-pdf查看pdf文件及打印亂碼的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue項目自動設置請求狀態(tài)的配置方法,本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue-cli3項目升級到vue-cli4 的方法總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了vue項目中jsonp跨域獲取qq音樂首頁推薦問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05