點擊藍色 “達達前端小酒館” 關注我哦!

加個 “星標” ，每天一篇文章，一起學編程

作者 |? Jeskson

來源 |? 達達前端小酒館

Vue組件的概述

組件是什么呢，了解組件對象的分析，Vue組件中的data屬性，props傳遞數據的原理到底是什么。

事件通信的那些事

如何了解父子組件事件通信，和遇到非父子組件事件通信如何處理。

組件類型又是什么鬼

自定義組件雙向綁定v-model，動態組件，又是如何稱為動態的，為啥是動態呢，遞歸組件，如何理解遞歸。

Vue組件的了解

Vue的理解，可以找我上一篇vue.js-詳解三大流行框架VUE_快速進階前端大咖-Vue基礎，組件是什么，組件就是自己寫好的一部分封裝好的功能，自己寫的叫組件，別人寫的叫插件，組件的運用，是vue.js強大的功能之一，組件的出現是為了提高代碼的可重用性，組件是一部分完整好的，如果要使用，你可以放到你自己任何的項目上去，減少代碼的重復書寫。

直接在你要用的地方引入即可，是不是減少了重復性開發，可以把組件的代碼按照template，style，script的拆分形式，放到對應的文件中。

template是什么？它是模板(template)，模板是聲明了數據和最終展現給用戶的dom之間的映射關系，初始化數據data是什么？一個組件的初始數據狀態，對于可以重復使用的組件來說，通常是私有的狀態，方法methods是對數據進行操作的方法，接收外部參數，組件之間通過參數來進行數據的傳遞和共享props，參數默認是單向綁定，也可以雙向綁定。

回調函數，一個組件可以觸發多個回調函數，created()，attached()，destroyed()。

Vue組件，全局注冊與局部注冊

全局注冊文件，Vue.component('組件名', {組件參數})方式創建

???// 創建全局組件?Vue.component('my-component",{?// template: 組件的HTML代碼結構?template: 'this is dada'});//?Vue實例對象var vm = new Vue({ el: '#app'});

局部注冊組件，不是每個組件都是需要進行全局注冊的，也可以直接在vue實例對象的構造函數中，使用compontent關鍵字進行注冊自定義的組件。

<div id="app">?<local-component>local-component>div><script?src="https://unpkg.com/vue">script><script>// Vue實例UI小var vm = new Vue({ el: '#app', // 創建局部組件 components: {??'my-components': {???template:?'this?is?my'?? }??}?}});

首先先創建局部組件對象，然后注冊Vue構造器中注冊局部組件對象，最后使用局部組件。

"app">?//?在默認情況，使用camel標記法將ui自動轉換為短橫線形式?local-component>div>?//?自定義組件?const?my?=?Vue.component('my-component", {? template: '#my'?});?//?vue實例對象?var?vm = new Vue({? el: '#app'?});//?會出現程序錯誤因為vue組件只允許有一個根元素。組件template屬性中包含div與P兩個元素<template id="my">?// 組件只允許有一個根元素?? da??

da

?template>// 成功

vue組件中的data屬性

在組件中，可以使用任何有效的Vue實例對象屬性。data屬性是Vue組件可用的響應式數據，它是Vue實例的數據對象。在創建實例后，用戶可以通過vm.$data訪問原始數據對象，Vue實例也代理了data的所有屬性。

即vm.a 等價于 vm.$data.a，以"_"或者是"$"開頭的屬性不會被Vue實例代理，因為它們可能和Vue內置的屬性以及api方法產生沖突。

//?創建一個實例var?vm?=?new Vue({ data: data})vm.a // => 1vm.$data?=== data // => true//?Vue.extend()中的datavar?Component = Vue.extend({ data: function() {??return { a: 1 }?}})

data屬性必須聲明為返回一個初始數據對象的函數。

"app">

my-component

my

<template id="my"> ??this?is?my??

this is da

??

{{message}}

??"message?=?'update message'">??修改?? template> var data={ message: 'global'?}?// 全局組件?const my = Vue.component('my-component', {? template: '#my',??//?data屬性表示當前組件使用的數據信息??// data屬性必須是回調函數形式，在回調函數中要返回對象??data: function() {???return?data;??}});?//?Vue實例對象?var?vm?=?new Vue({? el: '#app'?});// 全局組件const?my?=?Vue.component('my-component',{ template: '#my', // data屬性表示當前組件使用額數據信息?//?data屬性必須是回調函數形式，在回調函數中要返回對象 // data屬性應該返回一個都有的對象 data: function() { return {???message:?'component-message'??};?}});

props傳遞數據

父組件和子組件之間的通信使用props，是組件數據中的一個字段，子組件使用props來獲取父組件的數據，props可以是字面量語法，動態語法，綁定修飾符等。

props字面量，子組件通過props聲明待接收的父組件數據，父組件中使用子組件，通過HTML屬性為子組件傳遞數據。

子組件：

const my = {?//?props:聲明接收父組件數據?props: ['message'],?//?data一樣?template:?'{{message}}'}

父組件：

<my-component?message="message from parent by props"><my-component>const my = {?props:?['myMessage'];?template: '{{message}}'}"hello">子組件props指明數據Vue.component("my-component",{ props: ['message'], template: '{{message}}'});<my-component >

動態語法：

id="app"> "message"> ?"message">?

v-bind指令將HTML屬性綁定到一個表達式上，使用v-bind指令將動態props綁定到父組件的數據。

var vm = new Vue({ el: '#app', data: { user: { name: 'test',???age:?'12'??}?}});

綁定修飾符

父組件的屬性發生變化時，會傳遞給子組件

//?默認單向綁定"parentMessage">// 雙向綁定"parentMessage">// 單向綁定"parentMessage">//?在子組件中修改props都會影響父組件的狀態"example">?<input?type="text"?v-model="info.name"/>?<child?v-bind:msg.once = "info">child>div>const?dada?= new Vue();//?創建組件const?child1Component={?template:?'#child1',?methods: {??updaeChild2:?function(){?? // 使用事件總線觸發自定義事件???dada.$emit('child1-event','update?name?from?child1');??}?}};const child2Component = { template: '#child2',?props: ['message'],?data: function() {? return {? name: 'child2'??};?},?created: function() {?// 保留當前vue組件對象?const?app?=?this;?// 監聽事件總線觸發的事件?bus.$on('child1-event', function(param){??console.log('捕獲');??app.name?=?param;?});}};

?? 不要忘記留下你學習的腳印 [點贊 + 收藏 + 評論]

作者Info：

> 【作者】：Jeskson

> 【原創公眾號】：達達前端小酒館。

> 【福利】：公眾號回復 “資料” 送自學資料大禮包(進群分享，想要啥就說哈，看我有沒有)！

> 【轉載說明】：轉載請說明出處，謝謝合作！~

大前端開發，定位前端開發技術棧博客，PHP后臺知識點，web全棧技術領域，數據結構與算法、網絡原理等通俗易懂的呈現給小伙伴。謝謝支持，承蒙厚愛！！！

感謝閱讀，原創不易，喜歡就點個[在看]?or?[轉發朋友圈]，這是我寫作最大的動力。

意見反饋

若本號內容有做得不到位的地方(比如：涉及版權或其他問題)，請及時聯系我們進行整改即可，會在第一時間進行處理。

這是一個有質量，有態度的公眾號

點關注，有好運

小編寫作不易

在看和轉發走起來

總結

以上是生活随笔為你收集整理的uniapp 子组件 props拿不到数据_来吧！一文彻底搞定Vue组件！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。