Vue props父組件向子組件傳值詳解

vue官網上可以說有我們想要的一切，先貼上通過prop傳值的官網地址：通過prop向子組件傳遞數據

 

Prop是什么？

　　Prop是你可以在組件上注冊的一些自定義特性。當一個值傳遞給一個prop特性的時候，它就變成了那個組件實例的一個屬性。

　　從這句話上面我們能看出兩點

　　1、prop是寫在組件上的。

　　2、把父組件的一個值傳給子組件時，這個值通過prop轉化成了這個子組件實例的一個屬性。

　　

　　不理解第二句話沒關系，看下面例子。

 

基礎--靜態傳值

　　1、首先創建一個Vue實例

　　2、注冊一個組件（這樣注冊組件的方式是全局注冊），還記得我們第一句話嗎？prop是在組件上的。因為可以是多個，所以是props。

　　　　在props上聲明的是title，在我們的template模板中使用的都是它。

　　3、使用組件。

<script>
        //第二步： 注冊一個全局組件
        Vue.component('props-component', {
            // 在這個組件上聲明props
            props:['title'],
            template:`
                <div>{{title}}</div>
            `
        });
        // 第一步：聲明Vue
        let vm = new Vue({
           el:'#app' 
        });
    </script>

<div id="app">
        <!-- 第三步：使用組件 -->
        <props-component title="props so easy"></props-component>
    </div>

 

　　這只是一個非常簡單的靜態傳值，可在實際中我們幾乎不用靜態傳值。

 

進階--動態傳值

　　我剛學習vue的時候，一直不知道props的流程到底是怎么樣的，也就是我是先創建組件，還是先聲明一個vue實例等等。流程很重要，

　　也可以說這種思想很重要。

　　說下我的理解：

　　1、首先我們應當知道自己創建的組件里面是什么標簽啊之類的。我應用到哪個地方？具體模板應該是什么樣子的？

　　　　就像我們上面例子中的這個最簡單的模板。

<div>{{title}}</div>

　　2、聲明組件上的props。

　　3、實例上的data值應當和props聲明的值對應。

 

　　看下面的例子:

　　場景：我想寫一個頁面的header標簽組件。

　　

　第一步：

// 第一步：聲明Vue
        let vm = new Vue({
           el:'#app',
           data:{
                
           }
        });

第二步：這個組件應當長什么樣子？

        // 第二步：創建組件
        Vue.component('my-header', {
            props:['lists'],
            template:`
                <header>
                    <ul>
                        <li>{{lists}}</li>
                    </ul>
                </header>
            `
        })

第三步：聲明headerList（其實熟練的話，這步驟完全省略了）

let vm = new Vue({
           el:'#app',
           data:{
                headerList:'首頁'
           }
        });

第四步：使用組件 :lists="headerList"

　　　　lists是我們在組件中props聲明的，headerList是我們在根實例中聲明的屬性

<my-header :lists="headerList"></my-header>

 

這樣就是一個最簡單的組件傳值了。

 

打完收工