Vue Component Communication (double 叒 Yi)

Props and $emit

const parent = {
			data(){
				return {
					a:1
				}
			}
			components:{
				child
			},
			template: '
      

        I am the parent component 
       
      
'
		}
		
const child = {
			data(){
				return {
					b:100}},props: {num: {
					type: Number.default:2 / / the default value
					require: true // Whether to upload
				}
			}
			template: '
      

        I am a child component {{num}}
      
'
		}
Copy the code

The parent component passes the value to the child component via :value=' data '. The child component receives the value via props, which can be an array or an object. Type specifies the type of the value to be passed. Defaul (){return {}},require specifies whether the default and require cannot exist simultaneouslyCopy the code

const child = {
			data(){
				return {
					a:100}},methods:{
				send(){
					this.$emit('send'.this.a)
				}
			},
			template:` < div > < div > I am a child component < / div > < button @ click = 'send ()' > click send < / button > < / div > `
		}
		const parent = {
			data(){
				return {
					num:0}},components:{
				child
			},
			methods:{
				get(val){
					this.num = val
				}
			},
			template:` < div > < div > I am a parent component {{num}} < child @ send = 'get' / > < / div > < / div > `
		}
Copy the code

$emit(' event name ') sends an event to the parent component using $emit(' event name ').Copy the code

children

const child = {
			data(){
				return {
					msg:'hellow Vue'}},template:` < div > < div > I am a child component {{MSG}} < / div > < button @ click = 'change ()' > click to change the value of the parent component < / button > < / div > `.methods:{
				change(){
					this.$parent.val = 'Changed'}}}const parent = {
			data(){
				return {
					val:'I am the value of the parent component'}},components:{
				child
			},
			template:` < div > < div > I am a parent component {{val}} < child / > < / div > < button @ click = 'the get ()' > click change child component values < / button > < / div > `.methods:{
				get(){
					this.$children[0].msg = 'hellow word'}}}Copy the code

The parent component can also communicate with the vue instance using the $parent and $children attributes. This allows the parent component to call the corresponding child component through $children, and the child component to fetch the corresponding parent component through $parent. $children returns an array, while $parent returns an objectCopy the code

Ref and refs

In the corresponding component binding, ref='name' is obtained by $refs.name. Note that ref returns the current bound DOM element if it is bound to a normal DOM element, and returns the component instance object if it is bound to a child component, so that the parent component can access the child component's dataCopy the code

The common VUE instance object completes sibling component communication

Sibling component communication is done through a common vUE instance object, where one sibling sends an event via $ON and the other receives an event via $emitCopy the code

let bus = new Vue()
		const sibling1 = {
			data(){
				return {
					n: 1}},methods:{
				changen(){
					this.n++
					bus.$emit('change'.2)}},template: ` < div > I am sibling1 {{n}} < button @ click = 'changen ()' > click change < / button > < / div > `
		}
		const sibling2 = {
			data(){
				return {
					n: 2
				}
			},
			mounted(){
				bus.$on('change',(msg) =>{
					this.n = this.n+msg
				})
			},
			template: '
      

        I am sibling2{{n}}
      
		}
Copy the code