欧美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，并且把子組件導入進來就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父組件向子組件傳值并改變子組件的樣式的資料請關注腳本之家其它相關文章！

相關文章

最新評論