您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)vue父子組件傳值以及單向數(shù)據(jù)流問題的示例分析,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
<div id="app"> <blog-item :title="title"></blog-item> </div> // 定義子組件 Vue.component("blog-item", { props: ['title'], data() { return { } }, template: "<p>{{title}}</p>" }) // 定義父組件 new Vue({ el: "#app", data() { return { title: "msg", } }, })
父組件通過 :title = "title" 將值傳遞給子組件,子組件中通過 props 來接收父組件的值,然后通過插值表達(dá)式渲染在頁面中。
常見的類型約束如下:
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }
除了上面常見的類型外,vue 還提供了構(gòu)造函數(shù)和自定義函數(shù)來自定義子組件 props 的類型。
//兩個(gè)組件公共的自定義函數(shù) function Person (firstName, lastName) { this.firstName = firstName this.lastName = lastName } //子組件中使用 Vue.component('blog-post', { props: { author: Person } //父組件中使用 var obj = new Person("1","2") <blog-post :author='obj'></blog-post>
上面的代碼中,首先定義一個(gè)公共的自定義構(gòu)造函數(shù),通過該構(gòu)造函數(shù)來可以來創(chuàng)建一個(gè)對象,該實(shí)例對象有兩個(gè)屬性,分別是 firstName 和 lastName,在父組件中調(diào)用該構(gòu)造函數(shù)創(chuàng)建一個(gè) obj 實(shí)例并傳遞給子組件,子組件定義類型為構(gòu)造函數(shù)的 prop 接收該對象。
// 自定義函數(shù) Vue.component('blog-post', { props: { propsA: String,//必須是字符串類型 propsB: [String,Number],//多個(gè)可選的類型 propsC: {type:Number,default:100},//定義類型并設(shè)置默認(rèn)值 // 自定義驗(yàn)證函數(shù) propsD:{ validator: function (value) { // 這個(gè)值必須匹配下列字符串中的一個(gè) return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } }
vue 中提供了非常靈活的來自定義子組件接收參數(shù)的類型,上面的代碼中通過自定義了驗(yàn)證函數(shù)來約束父組件中的傳值類型。
單向數(shù)據(jù)流是vue 中父子組件的核心概念,props 是單向綁定的。當(dāng)父組件的屬性值發(fā)生變化的時(shí)候,會(huì)傳遞給子組件發(fā)生相應(yīng)的變化,從而形成一個(gè)單向下行的綁定,父組件的屬性改變會(huì)流向下行子組件中,但是反之,為了防止子組件無意間修改了父組件中的數(shù)據(jù)而影響到了其他的子組件的狀態(tài),vue 規(guī)定了從下往上的數(shù)據(jù)流是不允許的。
當(dāng)父組件的屬性改變,會(huì)傳遞給子組件,而子組件的屬性改變不會(huì)影響父組件,這樣的話可能會(huì)覺得 props 有點(diǎn)雞肋了,只能初始化組件的時(shí)候使用,在子組件內(nèi)不能進(jìn)行操作,因此我們在使用的時(shí)候經(jīng)常有兩種板房去操作props:(1)定義一個(gè)局部變量,并用props 初始化它,以后操作這個(gè)局部變量。(2)定義一個(gè)計(jì)算屬性,處理props并返回。
<div id="app"> <blog-item :title="title1"></blog-item> <blog-item :title="title2"></blog-item> <blog-item :title="title3"></blog-item> <hr> <button @click='toclick'>點(diǎn)我</button> </div> // 定義子組件 Vue.component("blog-item", { props: ['title'], data() { return { } }, template: "<p>{{title}}</p>" }) // 父組件 new Vue({ el: "#app", data() { return { title1: "111", title2: "222", title3: "333" } }, methods: { toclick() { this.title3 = "000" } } })
<div id="app"> <blog-item :title="title"></blog-item> </div> // 定義子組件 Vue.component("blog-item", { props: ['title'], computed: { computedTitle() { return "computedTitle" + this.title } }, data() { return { subTitle: "subTitle" + this.title } }, template: "<p>{{title}}==={{subTitle}}==={{computedTitle}}</p>" }) // 父組件 new Vue({ el: "#app", data() { return { title: "111", } }, })
關(guān)于“vue父子組件傳值以及單向數(shù)據(jù)流問題的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。