vue 1.0 demo

组件间传值父传子，通过props

组件

<template>
	<div>
		<ul>
			<li>{{ sss }} 》配置</li>  <!-- 这里是sss -->
		</ul>
	</div>
</template>
<script>
	export default {
		props:['vvv'],    //传值vvv
		computed:{   
			sss(){        //这里是sss
				if(this.vvv){
					return this.vvv;
				}else {
					return "啊啊啊啊";
				}
			}
		}
	}
</script>

调用组件

<template>
    <test :vvv="list"></test>     <!-- 用vvv来接收，list来赋值 -->
</template>
<script>
    import test from 'components/common/test.vue';
    export default {
        data() {
            return {
                list:"贷后管理系统"
            }
        },
        components:{
            test
        }
    }
</script>

注意

<template>
	<div>
		<ul>
			 <li v-for="item in vvv">{{ item.name }} 》</li>  <!-- 传的值可以是一个数组，或者是一个对象 -->
		</ul>
	</div>
</template>
<script>
	export default {
		props:['vvv']
	}
</script>

---------------------------------------组件

全局注册使用方法：

<div id="app">  
    <my-component></my-component>  
</div>  
<script src="vue.js"></script>  
<script>  
    /*创建组件构造器*/  
    var MyComponent = Vue.extend({  
        template: '<p>This is a component</p>'  
    });  
    /*全局注册组件*/  
    Vue.component('my-component', MyComponent);  
    /*使用组件*/  
    var vm = new Vue({  
        el: '#app'  
    })  

  局部注册使用方法：

<div id="app">  
    <my-component></my-component>  
</div>  
<script src="vue.js"></script>  
<script>  
    var child = Vue.extend({  
        template: '<p>This is a component</p>'  
    });  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            'my-component': child  
        }  
    });  
</script>  

简化后

<div id="app">  
    <my-component></my-component>  
</div>  
<script src="vue.js"></script>  
<script>  
    /**全局注册 
     Vue.component('my-component', { 
        template: '<p>This is a component</p>' 
    }); 
     new Vue({ 
        el: '#app' 
    });*/  
        //局部注册  
    new Vue({  
        el: '#app',  
        components: {  
            'my-component': {  
                template: '<p>This is a component</p>}'  
            }  
        }  
    })  
</script>  

@