第一步：引入需要用到的组件页面
import slideshow from './../components/slideshow.vue' //例如这是轮播图组件页面第二步：定义组件
<template>
<div id="slideshow">
<!--把定义好的组件名称写在页面中 其中text的slideshowData值为传到组件页面的数据-->
<banner :text=slideshowData></banner>
</div>
<template>
<script>
import slideshow from './../components/slideshow.vue' //例如这是轮播图组件页面
export default {
name: 'slideshow',
data() {
return {
slideshowData: [
{"img": require('./../assets/img/index/xxx.jpg')},
{"img": require('./../assets/img/index/xxx.jpg')},
{"img": require('./../assets/img/index/xxx.jpg')},
{"img": require('./../assets/img/index/xxx.jpg')},
],
}
},
methods: {
},
components: {
banner: slideshow , //在components 中把刚引入的slideshow组件定义为banner
},
mounted: function() {
}
}
</script>第三步：回到slideshow页面准备接受数据
<!--该页面为组件页面-->
<template>
<div id="banner">
<!--方法一：直接使用text-->
<div v-for="(item,index) in text">
<img :alt="item.img" :title="item" :src="item.img" />
//其中 :src="item.img" 中img为传值页面定义的
</div>
<!--方法二-->
<div v-for="(item,index) in bannerlist">
<img :alt="item.img" :title="item" :src="item.img" />
</div>
</div>
</template>
<script>
export default {
props: ['text'], //接受从其他页面传过来的值
name: 'banner',
data() {
return {
bannerlist:[],
}
},
methods: {
},
components: {
},
mounted: function() {
//方法二： 传过来的值赋给在data中bannerlist
this.bannerlist=this.text
}
}
</script>关于第三步 一共有两种方法
方法一：直接用text
方法二：在mounted中把传过来的值赋给在data中bannerlist