【VUE入門】父組件給子組件傳值

父組件傳值給子組件

【 各位看的時候記得要看代碼中的註釋！！記得！！】

父組件給子組件傳值，最最要記得【 props】,在子組件中用 props 來接收父組件傳來的數據，以後展現在子組件中。

例如：

子組件 child.vue

<template>
   <div>
       <h5>我是子組件</h5>
       <p>我從父組件獲取到的信息是： {{message}}</p>
       <!----在html中調用這個  message 屬性，顯示數據--->
   </div>
</template>

<script>
   export default{
       props:['message']  //建立 props,爲它建立 message 這個屬性
   }

</script>

<style>

</style>

建立了子組件以後，就須要在父組件中 註冊一下 子組件,而後給子組件傳值。

父組件 father.vue

<template>
    <div id="app">
        <h5>我是父組件</h5>
        
        <!---- ② 引入子組件標籤  -->
        
        <child  message="hello"></child>  
        <!---  建立child標籤，在該標籤中把咱們在 子組件中建立的 message 賦值爲 「hello」 --->
        
    </div>
</template>

<script>

    import child from './components/child';
    
    export default{
        name:'app',
    
        // ①  註冊子組件
        components:{
            child
        }
    }

</script>

<style>

</style>

接下來子組件就會收到 「hello」 這個信息。

子組件 child.vue

<template>
   <div>
       <h5>我是子組件</h5>
       
       <!----  子組件收到信息  --->
       
       <p>我從父組件獲取到的信息是： {{message}}</p>  <!-- 我從父組件獲取到的信息是： hello  -->
       <!----在html中調用這個  message 屬性，顯示數據--->
       
   </div>
</template>

<script>
   export default{
       props:['message']  //建立 props,爲它建立 message 這個屬性
   }

</script>

<style>

</style>

另外，咱們也能夠在父組件對 message 的值進行 v-bind 動態綁定

例如：

父組件 father.vue

<template>
    <div id="app">
        <h5>我是父組件</h5>
        
        <!---- ② 引入子組件標籤  -->
        
        <child  v-bind:message="theword"></child>  
        <!---  建立child標籤，用 v-bind對 message 的值進行動態綁定，theword用於父組件，父組件對它賦值 --->
        
    </div>
</template>

<script>

    import child from './components/child';
    
    export default{
        name:'app',
        
        data(){
            return{
                theword:"come on baby"   //對  theword 進行賦值。
            }
        }
    
        // ①  註冊子組件
        components:{
            child
        }
    }

</script>

<style>

</style>

總結

• 子組件中要使用props設置一個屬性 message 來接收父組件傳過來的值。
• 父組件中： 1. 先註冊子組件 2. 引入子組件標籤，在標籤中給message賦值

或者

• 父組件中：用v-bind對 message 進行動態綁定，給message 設置一個參數 theword ，父組件中在 data()中設置 theword 的值。