快捷導(dǎo)航

Vue子父組件之間傳值的三種方法示例

更新時間：2024年02月06日 09:52:50 作者：YYYi_z

Vue的組件化給前端開發(fā)帶來極大的便利,下面這篇文章主要給大家介紹了關(guān)于Vue子父組件之間傳值的三種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

父組件向子組件傳值: props-父組件給子組件傳輸數(shù)據(jù)和驗證
子組件向父組件傳值：this.$emit()-子組件可以使用 $emit,讓父組件監(jiān)聽到自定義事件
通過refs調(diào)用子組件的值−用this.refs獲取到的是組件實例,可以使用組件的所有方法
父組件使用子組件傳過來的值
總結(jié)

父組件向子組件傳值: props-父組件給子組件傳輸數(shù)據(jù)和驗證

1.父組件的代碼示例

<template>
<div>父組件</div>
// 引用子組件
<Dialog :fatherData="fatherData"></Dialog>
</template>

<script>
// 導(dǎo)入子組件
import Dialog from '@/components/Dialog.vue'

export default {
  name: 'HomeView',
  components: { Dialog },
  data () {
    return {
      fatherData: '父組件的值',
    }
  }
}
</script>

2.子組件的代碼示例

<template>
  <div>
    <div>子組件</div>
    <div>
    //展示父組件數(shù)據(jù)
      {{fatherData}}
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      childrenData: '子組件自己的數(shù)據(jù)'
    }
  },
  //props的基本用法是父組件給子組件傳輸數(shù)據(jù)和驗證
  props: {
  //父組件數(shù)據(jù)
    fatherData: {
      type: String
    }
  }
}
</script>

子組件向父組件傳值：this.$emit()-子組件可以使用 $emit,讓父組件監(jiān)聽到自定義事件

1.父組件的代碼示例

<template>
<div>父組件</div>
// 引用子組件
<Dialog  @tranferData="tranferData"></Dialog>
//展示子組件的值
<div>{{ receiveData }}</div>
</template>

<script>
// 導(dǎo)入子組件
import Dialog from '@/components/Dialog.vue'

export default {
  name: 'HomeView',
  components: { Dialog },
  data () {
    return {
      fatherData: '父組件的值',
      receiveData:''
    }
  },
  methods: {
  //接收子組件傳過來的數(shù)據(jù)
  tranferData(val){
  	console.log('子組件向父組件傳過來的值:',val)
  	this.receiveData = val
  }
  }
}
</script>

2.子組件的代碼示例

<template>
  <div>
    <div>子組件</div>
    <el-button @click="tranfer">子向父傳值</el-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      childrenData: '子組件的值'
    }
  }
  },
  methods:{
  	tranfer(){
  	this.$emit('tranferData',this.childrenData)
  	}
  }
}
</script>

通過refs調(diào)用子組件的值−用this.refs獲取到的是組件實例,可以使用組件的所有方法

1.父組件的代碼示例

<template>
<div>父組件</div>
// 引用子組件
<Dialog ref='dialogData'></Dialog>
<div>通過refs拿到子組件的值</div>
<el-button @click="toGet">refs拿到子組件的值</el-button>
</template>

<script>
// 導(dǎo)入子組件
import Dialog from '@/components/Dialog.vue'

export default {
  name: 'HomeView',
  components: { Dialog },
  data () {
    return {
      fatherData: '父組件的值',
    }
  },
  methods:{
  toGet(){
  	 // 通過refs調(diào)用子組件的值(childrenData)
    	const data = this.$refs.dialogData.childrenData
     	alert(data)
     //  通過refs調(diào)用子組件的值(childrenWay())
     	const way = this.$refs.dialogData.childrenWay()
     	alert(way)
  }
  }
}
</script>

2.子組件的代碼示例

<template>
  <div>
    <div>子組件</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      childrenData: '子組件自己的數(shù)據(jù)'
    }
  },
  methods:{
  childrenWay(){
  	alert('父組件調(diào)用子組件的方法')
  }
  }
}
</script>