vue父元件向子元件傳值

簡介

vue中元件與元件的關系存在兩類：父子元件與非父子元件。

如下圖所示，三個元件中就包含了父子元件與非父子元件兩種情況，這裡元件之間的互動主要由值傳遞和事件觸發調用兩種方式，這裡先分享下父元件向子元件值傳遞。

方式

父元件可以向子元件傳遞的值有三種類型

1. 屬性變量或者純文字
2. 函數名
3. 父元件自身執行個體（this）

例子

假設有兩個元件App.vue和Sub1.vue，其中App.vue為父元件，Sub1.vue為子元件。

父元件App.vue

<template>
     <!--父元件傳遞titile，run，home給子元件sub1-->
     <!--其中title為屬性，run為方法，this為父元件執行個體的指針-->
     <sub1 :title="title" :run="run" :home="this"  ref="deleteConfirm"/>
</template>
<script>
//導入子元件
import Sub1 from './Sub1.vue' 
export default {
      name: 'app',
      data() {
             return {
           　　　　title : 'test' 
      　　   }
       },methods {
             run() {
                    console.log('parent')
             }
       }, components: {
      　　　　Sub1 //挂載子元件Sub1
       }
}
</script>      

子元件Sub1.vue

<template>
     <!--子元件接收父元件傳過來的title-->
     <module :title="title" : ref="deleteConfirm"/>
     <!--這裡點選button可以調用父元件的run方法-->
     <button :click="run()"></button>
     <!--runParent内部通過父元件的this指針調用父元件的屬性和方法-->
     <button :click="runParent()"></button>
</template>
<script>
　　export default {
          name: "Sub1",
          data() {
                return {
                  title: ''
             }
          },
          //1.第一種方法，用數組的方式接收父元件的傳值：title,run,home
          props: ['title','run','home'],
         ,methods {
              runParent() {
                   //可以通過父元件執行個體this.home直接調用父元件中的方法。
                   console.log(this.home.title);
    　　　　　　　　　this.home.run();
              }
         }
    }
</script>      

prop接收參數

prop有兩種接收父元件傳遞的參數文法。

第一種就是上面的props: ['title','run','home'],這種數組方式

第二種：我們也可以在傳遞值的時候對prop進行校驗。

常見的類型：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

上面的Props可以改成如下

props: {
        title: {  //接收父元件傳遞過來的title
             type: String,
             default() {
                  //如果父元件沒有傳遞title變量，則使用default()擷取一個預設值
                  return this.$t('commons.title')
         　　 }
        },
        run: { //接收父元件傳遞過來的run方法，
             type: Function,
             default: function () {
                  console.log('hello')
             }
        },
        home: { //接收父元件本身
             type: Object,
        }
  },      

部落客：測試生财（一個不為996而996的測開碼農）

座右銘：專注測試開發與自動化運維，努力讀書思考寫作，為内卷的人生奠定财務自由。

内容範疇：技術提升，職場雜談，事業發展，閱讀寫作，投資理财，健康人生。

csdn：https://blog.csdn.net/ccgshigao

部落格園：https://www.cnblogs.com/qa-freeroad/

51cto：https://blog.51cto.com/14900374

微信公衆号：測試生财（定期分享獨家内容和資源）