Vue的组件通信(又双叒叕)

178 阅读1分钟
props 和 $emit
const parent = {
			data(){
				return {
					a:1
				}
			}
			components:{
				child
			},
			template: `<div>我是父组件<child :num='a'/></div>`
		}
		
const child = {
			data(){
				return {
					b:100
				}
			},
			props:{
				num: {
					type: Number,
					default:2 // 默认值
					require: true // 是否必传
				}
			}
			template: `<div>我是子组件{{num}}</div>`
		}
总结:
    父组件传值给子组件 通过:value='数据',子组件通过props接收,这里的props可以为一个数组,也可以是一个对象,
    type规定传过来的值的类型,如果是对象 数组 或者函数的话需要借助工厂函数返回默认值,
    即: defaul(){return {}} ,require规定是否必传,default 和 require不可以同时存在
const child = {
			data(){
				return {
					a:100
				}
			},
			methods:{
				send(){
					this.$emit('send',this.a)
				}
			},
			template:`<div><div>我是子组件</div><button @click='send()'>点击发送</button></div>`
		}
		const parent = {
			data(){
				return {
					num:0
				}
			},
			components:{
				child
			},
			methods:{
				get(val){
					this.num = val
				}
			},
			template:`<div><div>我是父组件{{num}}<child @send='get'/></div></div>`
		}
总结:
    子组件传父组件,需要借助$emit('事件名')发送一个事件给父组件,@事件名=''
parent 和children
const child = {
			data(){
				return {
					msg:'hellow Vue'
				}
			},
			template:`
			<div>
				<div>我是子组件 {{msg}}</div>
				<button @click='change()'>点击更改父组件的值</button>
			</div>`,
			methods:{
				change(){
					this.$parent.val = '已更改'
				}
			}
		}
		const parent = {
			data(){
				return {
					val:'我是父组件的值'
				}
			},
			components:{
				child
			},
			template:`
			<div>
				<div>我是父组件{{val}}<child/></div>
				<button @click='get()'>点击更改子组件的值</button>
			</div>`,
			methods:{
				get(){
					this.$children[0].msg = 'hellow word'
				}
			}
		}
总结:
    父子组件通信也可以借助vue实例的两个属性$parent 和 $children 来完成通信,
    此方式可以使父组件通过$children调用对应子组件的数据,子组件通过$parent来获取对应的父组件的数据
    注意的是:在$children返回的是一个数组,而$parent返回的是一个对象
    
ref 和 refs
在对应的组件绑定ref='name',通过$refs.name来获取,需要注意的是ref如果绑定在普通的DOM元素上的
话是返回当前绑定的DOM元素,如果绑定在子组件上返回的是组件实例对象,这样的可以通过父组件访问
子组件的数据
公共的vue实例对象完成兄弟间组件通信
兄弟组件通信需要借助一个公共的vue实例对象来完成,其中一个兄弟组件通过$on发送一个发送一个事件,
另一个兄弟组件通过$emit接收事件
let bus = new Vue()
		const sibling1 = {
			data(){
				return {
					n: 1
				}
			},
			methods:{
				changen(){
					this.n++
					bus.$emit('change',2)
				}
			},
			template: `
				<div>我是sibling1{{n}}
					<button @click='changen()'>点击改变</button>
				</div>
			`
		}
		const sibling2 = {
			data(){
				return {
					n: 2
				}
			},
			mounted(){
				bus.$on('change',(msg) =>{
					this.n = this.n+msg
				})
			},
			template: `
				<div>我是sibling2{{n}}</div>
			`
		}