vue 元件之間傳值_vue 的父子元件之間 props 通信的方法【14】

學習要點：1.元件的 props

本節課我們來開始學習 Vue 的元件 props 通信的方法。

一．元件的 props

1. 元件的父子關系中，當設定一個獨立元件時，這個元件就是 new Vue()的子元件；

2. 當我們需要通過子元件顯示父元件 data 值的時候，需要通過 props 屬性傳值；

<div id="app">    <html-a text="world">html-a>    <html-a v-bind:text="text">html-a>div>
           

<script src="../js/vue.js">script><script>    Vue.config.productionTip=false;    //子元件    const childComponent={        props:['text'],        template:`            
           

{{text}}

`, }; //資料 const dataObj={ text:'Mr.ren' }; //父元件 const app=new Vue({ el:'#app', data:dataObj, components:{ 'html-a':childComponent } });script>

3. 在 JS 操作 HTML 屬性名有一個大小寫的問題：兩個單詞組合，使用如下寫法：

<div id="app">    <html-a h-text="world">html-a>    <html-a v-bind:h-text="hText">html-a>div>
           

const childComponent={    props:['hText'],    template:`        <div>{{hText}}div>    `,};
           

4. 如果設定一個全局元件，并未綁定 new Vue()執行個體，那它也是 Vue 執行個體的子元件；

<div id="app">    <html-a h-text="world">html-a>    <html-a v-bind:h-text="hText">html-a>div>
           

//全局元件(子元件)Vue.component('html-a',{    props:['hText'],    template:`        
           

{{ hText }}

`,});//資料const dataObj={ hText:'注意大小寫問題'};

PS：子元件和父元件都有 message 屬性，同時調用并不沖突；順序也可控；

如果您覺得有用，記得在下方點贊、關注、留言，小編會定期奉上更多的驚喜哦，您的打賞支援才是小編繼續努力的動力，麼麼哒。

每日分享在學習過程中總結的學習經驗，學習筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學習為目的，每天閱讀一篇文章，了解身邊的技術，陪有夢想的人一起成長！