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

 更新时间:2022年12月24日 08:44:17   作者:猫儿念你  
这篇文章主要介绍了vue之父组件向子组件传值并改变子组件的样式,需要的朋友可以参考下

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

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

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

父组件的代码:

    <!-- 注释的部分是之前没有用组件的代码 -->
	<!-- <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 {
		// 父组件传过来的数据
		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父组件向子组件传值并改变子组件的样式的资料请关注脚本之家其它相关文章!

相关文章

  • vue实现图片转pdf的示例代码

    vue实现图片转pdf的示例代码

    这篇文章主要为大家详细介绍了vue实现图片转pdf的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,需要的小伙伴可以跟随小编一起了解一下
    2023-08-08
  • Vue通过封装全局获取焦点指令

    Vue通过封装全局获取焦点指令

    这篇文章主要为大家详细介绍了Vue通过封装全局获取焦点指令的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
    2023-12-12
  • Vue中div contenteditable 的光标定位方法

    Vue中div contenteditable 的光标定位方法

    今天小编就为大家分享一篇Vue中div contenteditable 的光标定位方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue计算属性实现成绩单

    Vue计算属性实现成绩单

    这篇文章主要为大家详细介绍了Vue计算属性实现成绩单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue 按需引入vant跟全局引入方式

    vue 按需引入vant跟全局引入方式

    这篇文章主要介绍了vue 按需引入vant跟全局引入方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • element UI 2.15.13与vue2.0表格勾选回显关键demo

    element UI 2.15.13与vue2.0表格勾选回显关键demo

    这篇文章主要为大家介绍了element UI 2.15.13与vue2.0表格勾选回显关键demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • vue日期组件 支持vue1.0和2.0

    vue日期组件 支持vue1.0和2.0

    这篇文章主要为大家详细介绍了vue日期组件,支持vue1.0和2.0,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Vue实现web分页组件详解

    Vue实现web分页组件详解

    这篇文章主要为大家详细介绍了Vue实现web分页组件的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue项目base64转img方式

    vue项目base64转img方式

    这篇文章主要介绍了vue项目base64转img方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vant中Popover气泡弹出框位置错乱问题解决

    Vant中Popover气泡弹出框位置错乱问题解决

    这篇文章主要为大家介绍了Vant中Popover气泡弹出框位置错乱问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06

最新评论