这里写一种简单、实用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后面的数字会变话。
下一步按钮是父组件内容,其余的是子组件内容。