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

vue3中的組件間的傳值(props)

 更新時(shí)間：2023年04月24日 09:17:36   作者：拾柒念  
這篇文章主要介紹了vue3中的組件間的傳值(props)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3組件間的傳值(props)

父組件向子組件傳值

在父組件中：

1.引入ref

2.定義要傳遞的屬性和屬性值

3.向vue頁(yè)面中的子組件傳遞該屬性屬性

傳遞屬性

:傳給子組件的名字（自定義） = “對(duì)應(yīng)定義在父組件的屬性名”

在子組件中：

4.接收父組件傳來(lái)的屬性

props: {
 showDialogVisible: Boolean
},
setup() {
 return {
 }
}

5.注冊(cè)該組件

setup(props) {
    // 可以打印查看一下props傳過(guò)來(lái)的屬性以及屬性的值
	console.log(props);
	
	return {
		props
	}
}

6.在子組件的頁(yè)面使用該屬性

父組件向子組件傳值完成！

子組件向父組件傳值（常規(guī)）

  • 在子組件中：

由于vue數(shù)據(jù)傳遞是單向數(shù)據(jù)流，子組件沒有權(quán)利修改父組件傳過(guò)來(lái)的數(shù)據(jù)，只能請(qǐng)求父組件對(duì)原始數(shù)據(jù)進(jìn)行修改，用emit 通知父組件去修改。

1.在子組件中定義要修改父組件那個(gè)屬性（或方法）的值

setup(props,context) {
    context.emit('setShow', false);
	
	return {
	}
}
//也可以：es6解構(gòu)賦值取到emit
//setup(props,{emit}) {
//    emit('setShow', false);
//	
//	return {
//	}
//}

context.emit(‘傳入父組件自定義的屬性名’, 屬性值);

  • 在父組件中：

2.再頁(yè)面接收子組件中傳入的自定義屬性名，綁定在自身對(duì)應(yīng)的屬性（方法）上

父組件向子組件傳值完成！

附上我的父組件方法：

子組件向父組件傳值（v-model）

? 如果子組件向父組件傳的值正好是父組件向子組件傳的值，可以直接在該屬性上進(jìn)行雙向綁定。

注：閱讀此小節(jié)建議先看完第一節(jié)：父組件向子組件傳值

  • 在子組件上：

1.直接修改從props中拿到的屬性

  • 在父組件上：

2.在父頁(yè)面中的子組件上進(jìn)行綁定

傳值完成！

vue3組件之間傳值和事件處理

這篇文章前自己也網(wǎng)上找了資料，發(fā)現(xiàn)這塊資料極少，所以還是自己記錄一下

項(xiàng)目需求是每個(gè)頁(yè)面需要加上頂部導(dǎo)航欄，加返回事件

 先寫子組件代碼，在components目錄下建一個(gè)nav.vue文件：

子組件nav.vue文件內(nèi)容

<template>
   <div>
    <el-affix position="top" :offset="0">
        <div class="nav">
          <span @click="backGo"><img src="../assets/back.png"/>返回</span>
          <p>{{title}}</p>
        </div>
    </el-affix>
  </div>
</template>
<script setup>
import{ defineProps } from "vue"
const props =defineProps({ //子組件定義接收父組件傳過(guò)來(lái)的值
       title:String 
})
//點(diǎn)擊返回事件
const backGo = () => {
    history.back()
}
</script>
<style scoped>
.nav{width: 100%;height:.6rem;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;background-color: #ffffff;border-bottom: 1px solid #f0f0f0;}
.nav span{position: absolute;height:100%;left: .2rem;top: 0;display: flex;align-items: center;color: #8a8a8a;}
.nav span img{width: .32rem;}
</style>

父組件aboutus.vue文件：

<template>
  <div class="wrap">
      <Nav title="關(guān)于我們"></Nav> <!--記住這里第一個(gè)字母大寫哦-->
        <div class="lists">
          <ul class="abus">
              <li><p><router-link to="/company">公司介紹</router-link></p></li>
              <li><p><router-link to="/privacy">隱私政策</router-link></p></li>
              <li><p><router-link to="/useragree">用戶協(xié)議</router-link></p></li>
          </ul>
      </div>
  </div>
</template>
<script setup>
import Nav from '@/components/nav.vue' 
 
</script>

記住引入子組件時(shí)，第一個(gè)字母大寫哦 ！

是不是很簡(jiǎn)單！

下面介紹子組件傳值

同樣是拿子組件nav.vue來(lái)測(cè)試，直接上代碼：

<template>
    <div>
    <el-affix position="top" :offset="0">
    <div class="nav">
      <span @click="backGo"><img src="../assets/back.png"/>返回</span>
      <p>{{title}}</p>
    </div>
  </el-affix>
    </div>
</template>
<script setup>
import{ defineProps ,defineEmits} from "vue"
const emits =defineEmits(['getBackGo']) //注冊(cè)父組件回調(diào)方法
const props =defineProps({
       title:String
})
const backGo = () => {
    // history.back()
    emits("getBackGo","傳個(gè)值給父組件！")
}
</script>
<style scoped>
.nav{width: 100%;height:.6rem;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;background-color: #ffffff;border-bottom: 1px solid #f0f0f0;}
.nav span{position: absolute;height:100%;left: .2rem;top: 0;display: flex;align-items: center;color: #8a8a8a;}
.nav span img{width: .32rem;}
</style>

來(lái)看看父組件aboutus.vue寫法：

<template>
  <div class="wrap">
      <Nav title="關(guān)于我們" @getBackGo="getBackGoInfo"></Nav>
      <img src="../../assets/logo.jpg" class="logo"/>
      <div class="lists">
          <ul class="abus">
              <li><p><router-link to="/company">公司介紹</router-link></p></li>
              <li><p><router-link to="/privacy">隱私政策</router-link></p></li>
              <li><p><router-link to="/useragree">用戶協(xié)議</router-link></p></li>
          </ul>
      </div>
  </div>
</template>
<script setup>
import Nav from '@/components/nav.vue'
const getBackGoInfo = (value) => {
    console.log(value)
}
 
</script>

效果如下：

完美！ 

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論