[實力入坑]VUE-父組件向子組件傳值

這裏寫一種簡單、實用vue父組件向子組件傳值的方式。（感覺vue文檔有很多地方沒寫清楚）
比如：routlink.vue是我要展示的頁面，tables.vue是需要調用的組件（另外一個頁面）。
本人使用的是ElementUI組件，大家直接複製的話可能是跑不起來的，不過這種方式很簡單明瞭。
直接進行局部組件註冊，在所需要的文件scrip中導入即可，需要在components中寫入就行。
一些相關說明直接在註釋裏，採用的是props傳值方式。

下面是routlink.vue

<template >
  <div>

  <div id='ttt'  :active="active"></div>
  <button style="margin-top: 12px;" @click="next" >下一步</button>
  <!-- 直接調用子組件時，直接使用import命名的那個子組件作爲標籤名即可，
    傳值： 形如這裏的 :active="active"
          直接   :(子組件裏的值名稱)="(需傳入的參數名稱)"
  
   -->
  <tables :active="active"></tables>

  </div>

</template>

<script>
import tables from './common/tables'
export default {
  // 這裏name僅是此組件的一個命名
    name:'this-is-a-child-table-name', 
    // 包含你所需要調用的組件名稱，即import導入的名稱
    components:{tables},

        data() {
            return {
                active: 0,
            }
        },
        methods: {
      next() {
        console.log(this.active);

        if (this.active++ > 6) this.active = 0;
      }
    }
}

</script>

下面是tables.vue

<template id>

    

    <div id="table">
      
    <el-steps :active="active" finish-status="success" space='10px' process-status>
    <el-step title="步驟 1"></el-step>
    <el-step title="步驟 2"></el-step>
    <el-step title="步驟 3"></el-step>
    <el-step title="步驟 3"></el-step>
    <el-step title="步驟 3"></el-step>
    <el-step title="步驟 3"></el-step>
    <el-step title="步驟 3"></el-step>
    </el-steps>

    <!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->

    <div>
      asdf
      {{active}}
    </div>

    </div>
</template>

<script>
  export default {
    name:"v-table",
    // 採用傳值的方式：props
    props: {
            active:Number
        },
    data() {
      return {
        // active: 0
      };
    },

  }
</script>

效果圖：

點擊下一步，這個步驟就會前進一部，同時 asdf後面的數字會變話。
下一步按鈕是父組件內容，其餘的是子組件內容。