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
,并且把子組件導(dǎo)入進來就ok。
子組件需要props: [ "newlists" ],
并且將v-for中的list改為newlists
即可。
vue父組件改變子組件的樣式
問題描述:有時候我們可以需要將某些經(jīng)常運用的部分抽成組件,但是有很少的部分樣式是不同的,這時候就需要更改父組件中子組件的樣式。
1. 直接將style標(biāo)簽上的scoped屬性去掉【不推薦,有可能影響全局樣式】
<style scoped="scoped"> </style>
2. 新添加一個style樣式標(biāo)簽
<style> </style> //原來的style <style scoped="scoped"> </style>
3. 直接在原來的style中添加樣式,并在樣式前面加上/deep/
但是注意,要更改某些屬性時可以更改不了,因為這個只能更改當(dāng)前組件中的樣式,而有些樣式是全局的。
<style scoped> /deep/.list{ color:#ccc; } </style>
以上就是vue之父組件向子組件傳值并改變子組件的樣式的詳細(xì)內(nèi)容,更多關(guān)于vue父組件向子組件傳值并改變子組件的樣式的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue.js+HighCharts實現(xiàn)動態(tài)請求展示時序數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Vue.js+HighCharts實現(xiàn)動態(tài)請求展示時序數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03Javascript vue.js表格分頁,ajax異步加載數(shù)據(jù)
這篇文章主要介紹了Javascript vue.js表格分頁,ajax異步加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-10-10使用yarn?build?打包vue項目時靜態(tài)文件或圖片未打包成功的問題及解決方法
這篇文章主要介紹了使用yarn?build?打包vue項目時靜態(tài)文件或圖片未打包成功的問題及解決方法,解決方法不復(fù)雜通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08詳解Vue中Computed與watch的用法與區(qū)別
這篇文章主要介紹了Vue中computed和watch的使用與區(qū)別,文中通過示例為大家進行了詳細(xì)講解,對Vue感興趣的同學(xué),可以學(xué)習(xí)一下2022-04-04