欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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，并且把子組件導(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)文章

最新評論