[实力入坑]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后面的数字会变话。
下一步按钮是父组件内容,其余的是子组件内容。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章