核心:
父子传值、slot插槽
- 插槽传值
<slot title=“123” name=“aaa”></slot>
- 父组件接收插槽值
<div slot=“aaa” slot-scope=“props” :value=“props.title”></div>
示例步骤
1、在components
文件夹下新建一个MyComponent1
文件夹,新建MyCompont1.vue
(以btn为例)
<template>
<el-button-group>
<el-button
v-for="(btn,index) in this.buttons"
:key="index"
:type="btn.type ? btn.type:'primary'"
:icon="btn.icon"
:size="btn.size?btn.size:'mini'"
@click="btn.click"
>
{{btn.label}}
</el-button>
</el-button-group>
</template>
<script>
export default {
name: 'MyComponent1', // name就是封装好后使用的组件名
props: {
buttons: {
type: Array,
required: true
}
}
}
</script>
2、components文件夹下新建index.js
, 用于注册组件,也可以在main.js中注册,为了统一管理建议放在components中注册
3、然后main.js
中引入,就可以直接使用了**
注册
import Vue from 'vue'
import MyComponent1 from './MyComponent1/index.vue'
//多个组件就多次注册
Vue.component(MyComponent1.name, MyComponent1)
''
使用
<template>
<div>
<MyComponent1 :buttons="buttons"></MyComponent1>
</div>
</template>
<script>
export default {
name: '',
data () {
return {
buttons: [{
label:'创建',
icon:'el-icon-circle-plus-outline',
click: ()=>{console.log('创建')}
},{
label:'修改',
icon:'el-icon-edit-outline',
click: ()=>{console.log('修改')}
}]
}
}
}
</script>