Vue 组件化 vuecli

vuecli 创建一个项目

npm 创建 一个vuecli 项目
创建命名： vue create mydome
启动命名：npm run serve

01 首先进入入口组件 app.vue

···把一些不需要的框架默认样式和内容全部删除掉

1. 用户列表组件
2. 聊天框组件
3. 练习目的主要是为了增强 认识组件化 以及 组件化的父子 传值机制
4. 注意事项 组件文件 components
5. img 和 他们是同级目录 引入需要用 require

app.vue 代码code

<template>
	<div id='app'>
		<userlist  :setindex='getuser' :lists='lists'></userlist>
		<userleft :user='user'></userleft>
	<div>
</template>
import userlist from './components/userlist.vue'
import userleft form './components/userleft.vue'
//引入
<script>
		export default {
		name:'app',
		data(){
		return {
				lists:[
					{
					name:'小红',
					sex:'女',
					id:"0",
					imgurl：require('./img/001.jpg')
					},{
					name:'小紫',
					sex:'女',
					id:"1",
					imgurl：require('./img/002.jpg')
					},{
					name:'小绿',
					sex:'男',
					id:"2",
					imgurl：require('./img/003.jpg')
					}
					//首先这里我们需要把这个值 传递给 userlist组件里面 
				],
				user:{
					name:'管理员',
					sex:'女',
					id:"000000",
					imgurl：require('./img/004.jpg')
					}
			}
		},
		methods:{
			getuser:function(index){
				this.user=this.lists[index]
			}
		},
		components:{
			userlist,userleft
		},
	}
</script>

userleft.vue 代码code:

<template>
	<div >
		<div>
			<user.name>
		</div>
	<div>
</template>
<script>
	export default {
	props:['user']
	}
</script>

userlist.vue 代码 code

	<template>
		<div>
			<ul>
			<li
			v-for='item,index in lists'
			@click='getindex(index)'
			>
			<img :src='item.imgurl' >
			<p>{{item.id}}</p>
			<p>{{item.name}}</p>
			<p>{{item.sex}}</p>
			</li>
			</ul>
		</div>
	</template>
	<script>
	export default {
	props:['lists']
	data(){
			return {

			}
		},
		methods:{
			getindex:function(index){
				this.$emit('setindex',index);
				//传值给index
			}
		}
	}
</script>