您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)vue 中有哪些傳值方法,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
父組件向子組件傳值
方法:父組件內(nèi)設(shè)置要傳的數(shù)據(jù),在父組件中引用的子組件上綁定一個自定義屬性并把數(shù)據(jù)綁定在自定義屬性上,在子組件添加參數(shù)props接收即可。具體可參考官方文檔。
父組件傳遞參數(shù)代碼如下:
<template> <center-template :form='userinfo'></center-template> </template> <script> import CenterTemplate from '../../components/admin/userCenterTemplate' export default { components: { 'center-template': CenterTemplate }, data () { return { userinfo: {name: 'jack'} } }, } </script>
上面代碼,通過在子組件上面綁定動態(tài)參數(shù):form='userinfo'將父組件中的參數(shù)傳遞給子組件,子組件就可以通過props來進(jìn)行接收。
子組件接收參數(shù)代碼如下:
... export default { props: { // 接收 form: { userinfo: Object } } }, } // 另一種寫法 export default { props: { // 接收 form: ['userinfo'] } }, }
上面代碼中,還可以使用數(shù)組來接受參數(shù),但是不能指定參數(shù)的類型。
子組件向父組件傳值
方法:子組件通過vue實例方法$emit進(jìn)行觸發(fā)并且可以攜帶參數(shù),父組件監(jiān)聽使用@(v-on)進(jìn)行監(jiān)聽,然后進(jìn)行方法處理。
子組件向上傳值
<template> <ul class="letter_city"> <li @click="selectItem('子組件向父組件傳值')"> </li> </ul> </template> <script> export default { methods: { selectItem(value) { this.$emit('selectItems', value) } } } </script>
上面代碼中,this指代的是vue實例,子組件通過$emit向父組件觸發(fā)事件和傳遞參數(shù)。
父組件監(jiān)聽子組件傳來的值
<template> <city-pages @selectItem='selectItem'></city-pages> </template> <script> import cityPages from './cityPages' export default { components: { cityPages }, methods: { selectItem(value) { console.log(value) // 子組件向父組件傳值 } } } </script>
上面代碼中,在子組件中監(jiān)聽方法,如果子組件觸發(fā)方法,父子間這邊就可以得到子組件傳過來的參數(shù)了。
非父子組件傳值一
Event BUS總線方法:通過新建一個vue實例,來實現(xiàn)$on接收和$emit 來觸發(fā)事件
1、新建bus.js文件:
// common/bus.js import Vue from 'vue'; // 使用 Event Bus const bus = new Vue(); export default bus;
2、組件1(接收通知信息)
import bus from '@/common/bus.js' export default{ data(){ return { collapseData: '' } }, created() { // 監(jiān)聽collapse,有變動就會收到通知,并改變collapseData值 bus.$on('collapse', msg => { this.collapseData = msg }) } }
3、組件2(發(fā)布信息)
import bus from '@/common/bus.js' export default { methods: { sendData(){ // 發(fā)布信號,觸發(fā)這個函數(shù),其他的接收函數(shù)都會收到相應(yīng)的信息 bus.$emit('collapse', '信息') } } }
非父子組件傳值二
借組vux插件實現(xiàn)組件之間的傳值。
1、通過npm加載vuex,創(chuàng)建store.js文件,然后在main.js中引入,store.js文件代碼如下:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const state = { message:'Hello World' }; const mutations = { newMessage(state,msg){ state.message = msg } } export default new Vuex.Store({ state, mutations })
3、在組件中存vuex的值,一般如下:
state里面的值只能通過Action來提交來修改和賦值。
<template> <div> <input type="text" @blur=saveName(username) v-model="username"> </div> </template> <script type="text/javascript"> // 引入mapActions,很重要 import { mapActions } from 'vuex' export default { data() { return { username:'', password: '' } }, methods: { ...mapActions({ // 在input 的blur 事件中觸發(fā)回調(diào),并將輸入值作為參數(shù)返回到store中 saveName: 'saveName' }) } } </script>
3、在組件中獲取Vuex的值,一般如下:
<template> <div id="list"> {{_name}} </div> </template> <script> import {mapState} from 'vuex' export default { name: 'List', data() { return{} }, computed: { // 1普通寫法 // name() { return this.$store.state.name } // 2簡潔寫法 //...mapState(['name']) // 3重命名 ...mapState({_name: "name"}) } </script>
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測試性更強的代碼庫,Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件,每個組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應(yīng)的地方,所以越來越多的前端開發(fā)者使用vue。
關(guān)于vue 中有哪些傳值方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。