我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue之父组件向子组件传值并改变子组件的样式

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vue之父组件向子组件传值并改变子组件的样式

问题描述:在做视频网站过程中发现每个视频的样式其实是大致相同的,所以就想着直接写个组件,但是又看不懂官网的传值,所以自己找了个视频看明白了。

想实现的效果:
在这里插入图片描述

vue父组件向子组件传值具体实现代码:

父组件的代码:

    <!-- 注释的部分是之前没有用组件的代码 -->
	<!-- <ul class="videoList">
					<li v-for="item in videoList" :key="item.id" class="videoItem">
						 <el-card :body-style="{ padding: '0px' }">
							<img :class="lazy" data-src="item.class="lazy" data-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,
						class="lazy" data-src: require('../../../assets/img/homepage/1.png')
					},
					{
						id: 1,
						title: "最美的官方哈哈哈啊哈哈哈哈哈哈美的官方哈哈哈啊哈哈哈哈哈哈",
						author: "贝壳官方",
						count: 300,
						class="lazy" data-src: require('../../../assets/img/homepage/1.png')
					}, {
						id: 2,
						title: "最美的官方",
						author: "贝壳官方",
						count: 300,
						class="lazy" data-src: require('../../../assets/img/homepage/1.png')
					}, {
						id: 3,
						title: "最美的官方",
						author: "贝壳官方",
						count: 300,
						class="lazy" data-src: require('../../../assets/img/homepage/1.png')
					}, {
						id: 4,
						title: "最美的官方",
						author: "贝壳官方",
						count: 300,
						class="lazy" data-src: require('../../../assets/img/homepage/1.png')
					}, {
						id: 5,
						title: "最美的官方",
						author: "贝壳官方",
						count: 300,
						class="lazy" data-src: require('../../../assets/img/homepage/1.png')
					}, {
						id: 6,
						title: "最美的官方",
						author: "贝壳官方",
						count: 300,
						class="lazy" data-src: require('../../../assets/img/homepage/1.png')
					}, {
						id: 7,
						title: "最美的官方",
						author: "贝壳官方",
						count: 300,
						class="lazy" data-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 :class="lazy" data-src="item.class="lazy" data-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 {
		// 父组件传过来的数据
		props: [
			"newlists"
		],
		// 自己的数据
		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父组件改变子组件的样式

问题描述:有时候我们可以需要将某些经常运用的部分抽成组件,但是有很少的部分样式是不同的,这时候就需要更改父组件中子组件的样式。

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父组件向子组件传值并改变子组件的样式的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue之父组件向子组件传值并改变子组件的样式

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue之父组件向子组件传值并改变子组件的样式

这篇文章主要介绍了vue之父组件向子组件传值并改变子组件的样式,需要的朋友可以参考下
2022-12-24

Vue组件化之父子组件传值

父子组件传值,兄弟之间传值场景小编这里还没有遇到,所以本次就以常用的父子组件传值来结合例子说一下!
父子组件Vue2024-11-30

vue中子组件怎么向父组件传值

vue中子组件怎么向父组件传值,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一,子组件主动触发事件将数据传递给父组件1,在子组件上绑定某个事件以及事件触发的函数子组件代码<
2023-06-20

Vue子组件向父组件传值示范方法

这篇文章主要介绍了Vue子组件向父组件传值方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
2023-03-20

vue组件间的通信,子组件向父组件传值的方式汇总

这篇文章主要介绍了vue组件间的通信,子组件向父组件传值的方式汇总,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-03-20

Vue子组件向父组件传值的方法是什么

这篇文章主要介绍了Vue子组件向父组件传值的方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue子组件向父组件传值的方法是什么文章都会有所收获,下面我们一起来看看吧。一、要点概述子组件:通过某种事件(
2023-07-05

vue组件间的通信,子组件向父组件传值的方式是什么

今天小编给大家分享一下vue组件间的通信,子组件向父组件传值的方式是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、子
2023-07-05

vue如何实现子组件向父组件进行传值

这篇文章主要为大家展示了“vue如何实现子组件向父组件进行传值”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何实现子组件向父组件进行传值”这篇文章吧。子组件向父组件进行传值:父组件内设置
2023-06-17

vue如何实现父组件向子组件进行传值

这篇文章给大家分享的是有关vue如何实现父组件向子组件进行传值的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。父组件向子组件进行传值:在子组件绑定父的数据,子组件通过props接受参数。接下来我们通过一个例子,说明
2023-06-17

Vue子组件接收父组件传值的方式有哪些

这篇文章给大家分享的是有关Vue子组件接收父组件传值的方式有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。父组件代码↓