vue-cli 引入组件并传值

第一步：引入需要用到的组件页面

 

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