vue之父组件向子组件传值并改变子组件的样式
作者：猫儿念你
这篇文章主要介绍了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父组件向子组件传值并改变子组件的样式的资料请关注脚本之家其它相关文章！