亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue父子傳值,兄弟傳值,子父傳值詳解

 更新時間：2021年11月01日 14:48:03   作者：大林愛學(xué)習(xí)  
這篇文章主要介紹了Vue傳值-三種常用傳值示例，主要介紹了父組件向子組件進(jìn)行傳值，子組件向父組件傳值和非父子組件進(jìn)行傳值，感興趣的小伙伴們可以參考一下

一、父組件向子組件傳值

1.父組件.vue

// 父組件中
<template>
    <div>
        <Child ref="child" :title="value"/>
    </div>
</template>    
<script>
export default {
    data() {
    	return {
    		value: 'hello world!'
    	}
    }
}
</script>

2.子組件.vue

// 父組件中
<template>
    <div>
       <span>{{title}}</span>    
    </div>
</template>    
<script>
export default {
  props: {
    title: {
      	type: String,
      	default: ''
    }
  }
}
</script>

//title值為'hello world!

二、兄弟組件間傳值還可以通過中間件Bus

$emit 傳值

$on 接收

$off 刪除傳輸事件

1.A組件.js

this.$bus.$emit("flag",true)

2.B組件.js

mounted() {
    this.$bus.$off('flag')
    this.$bus.$on('flag', data=> {
      this.flag= data
    })
  }

三、子組件向父組件傳值

1.父組件.js

<template>
    <div>
        <Child ref="child" @getTitle="getTitle"/>
    </div>
</template>  
<script>
import Child from './components/Child'
export default {
  components: {
  	Child 
  },
  data() {
    return {
    }
  },
  method:{
  	getTitle(data){
		console.log(data)
	}
  }
}
</script>

打印結(jié)果為 hello xuliting

2.子組件.js

<template>
    <div>
       <span>{{title}}</span> 
    </div>
</template>    
<script>
export default {
  data() {
    return {
    title: 'hello xuliting'
    }
  },
  mounted(){
    this.getFun()
  },
  method:{
    getFun(){
     this.$emit("getTiltle",this.title)
    }
  }
}
</script>

總結(jié)：

組件間也可以通過傳遞方法從而解決。例如父組件為A，子組件有B和C。

父組件A調(diào)用子組件B的方法定義為aFun，把a(bǔ)Fun傳遞給子組件C即可

這是在父組件中的組件C進(jìn)行方法傳遞

<C :a-fun="aFun" />

引用的則是在組件C，通過props

props: {
    aFun: {
      type: Function,
      default: () => function() {}
    }
  }

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

相關(guān)文章

最新評論