Vue中组件和组件传值

创建一个组件

创建一个组件

	Vue.component("组件的标签",{
		template:"模板内容"

	})
	//定义一个子组件
	Vue.component("child",{
		template:"<div></div>"
	})
	//定义一个父组件,将子组件在父组件中使用
	Vue.component("parent",{
		template:`<div>
			<child></child>
				</div> `
	})

组件传值

父子组件传值

	//定义一个子组件
	Vue.complate("child",{
	//在子组件中通过props接受父组件中的自定义属性
		props:["child_id"],
		template:`<div>{{child_id}}</div> `
	})
	
	//定义一个父组件
	Vue.component("parent",{
		template:` <div><child :child_id="id"><child></div>`,
		data(){
			return{
				id:"123"
			}
		}
	})

子组件向父组件传值

	//定义一个子组件
	Vue.component("child"{
		template:`
			<div @click=""fun>{{chile_id}}</div>
		`,
		data(){
			return:"123"
		},
		methods:{
			fun(){
				this.$emit("eve",this.id)
			}
		}
	})

	//定义一个父组件,将子组件在父组件中使用
	Vue.component("parent",{
		//在父组件中的子组件标签中绑定自定义事件(这个事件名称要用 this.$emit 定义的事件名称)
		template:` 
			<div>
				<child @eve="getID></child>
			</div>
		`,
		data(){
			return{
			}
		},
		methods:{
			getID(id){
				console.log(id)
			}
		}
	})

非父子组件传值

	//定义一个bus总线
	var bus = new Vue()
	//Vue.prototype.$bus = bus //见bus挂载在自己的vue项目的实例化对象中
	var app = new Vue({
		el:"#app",
		data:{
			bus
		}
	})	

	Vue.component("child_one",{
		template:`<div @click="fun">
			{{child_id}}
		</div>`,
		data(){
			return{
				id:"123"
			}
		},
		methods:{
			fun(){
				//如果采用bus挂载在原型上的写法
				//this.$bus.$emit("eve",this.id)
				//如果采用将bus放入根组件的data中
				this.$root.$bus.$emit("eve",this.id)
			}
		}
	})

	Vue.component("child_two",{
		template:`
			<div>
				<child></child>
			</div>
		`,
		data(){
			return{
			}
		},
		created(){
			//如果采用bus挂载在原型上的写法
			//this.$bus.$on("eve",function(data){
				//console.log(data)
			//})
			//如果采用将bus放入根组件的data中
			this.$root.$bus.$on("eve",function(data){
				console.log(data)
			})
		},
		methods:{
		}
	})