vue之父組件向子組件傳值并改變子組件的樣式
問(wèn)題描述:在做視頻網(wǎng)站過(guò)程中發(fā)現(xiàn)每個(gè)視頻的樣式其實(shí)是大致相同的,所以就想著直接寫個(gè)組件,但是又看不懂官網(wǎng)的傳值,所以自己找了個(gè)視頻看明白了。
想實(shí)現(xiàn)的效果:
vue父組件向子組件傳值具體實(shí)現(xiàn)代碼:
父組件的代碼:
<!-- 注釋的部分是之前沒(méi)有用組件的代碼 --> <!-- <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中$route序列號(hào)報(bào)錯(cuò)
本文主要介紹了記一次Vue中$route序列號(hào)報(bào)錯(cuò),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04Vue.js+HighCharts實(shí)現(xiàn)動(dòng)態(tài)請(qǐng)求展示時(shí)序數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Vue.js+HighCharts實(shí)現(xiàn)動(dòng)態(tài)請(qǐng)求展示時(shí)序數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03Javascript vue.js表格分頁(yè),ajax異步加載數(shù)據(jù)
這篇文章主要介紹了Javascript vue.js表格分頁(yè),ajax異步加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-10-10使用yarn?build?打包vue項(xiàng)目時(shí)靜態(tài)文件或圖片未打包成功的問(wèn)題及解決方法
這篇文章主要介紹了使用yarn?build?打包vue項(xiàng)目時(shí)靜態(tài)文件或圖片未打包成功的問(wèn)題及解決方法,解決方法不復(fù)雜通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08Vue項(xiàng)目啟動(dòng)后如何在瀏覽器自動(dòng)打開
這篇文章主要介紹了Vue項(xiàng)目啟動(dòng)后如何在瀏覽器自動(dòng)打開問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08Vue倒計(jì)時(shí)3秒后返回首頁(yè)Demo(推薦)
這篇文章主要介紹了Vue倒計(jì)時(shí)3秒后返回首頁(yè)Demo,倒計(jì)時(shí)結(jié)束后要清除計(jì)時(shí)器,防止內(nèi)存泄漏,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11詳解Vue中Computed與watch的用法與區(qū)別
這篇文章主要介紹了Vue中computed和watch的使用與區(qū)別,文中通過(guò)示例為大家進(jìn)行了詳細(xì)講解,對(duì)Vue感興趣的同學(xué),可以學(xué)習(xí)一下2022-04-04