theluyuan/daniaozhuanzhuanjiuba
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

插槽

Browse Source
This commit is contained in:
theluyuan 2021-09-01 10:35:21 +08:00
parent b334f528cf
commit b2b3d279df
2 changed files with 37 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/st.vue
View File

@ -2,12 +2,29 @@
<div>
<div>
<p>{{name}}</p>
<div style="background-color:#f00">这谁div
<!-- A -->
<slot name="A" v-bind:list="list" v-bind:aaa="456789"></slot>
</div>
<div style="background-color:#0f0">这谁div
<!-- B -->
<slot name="B" v-bind:list="list" v-bind:aaa="456789"></slot>
</div>
<!-- 只有默认插槽可以 -->
<div style="background-color:#00f">这谁div
<!-- A -->
<slot v-bind:list="list" v-bind:aaa="456789"></slot>
</div>
<button @click="fangfa">输出</button>
</div>
</div>
</template>
<script>
export default{
beforeCreate(){
console.log("组建这是第一个")
},
@ -29,6 +46,7 @@ export default{
data(){
return{
name:"aaa",
list:"这是子组件的list"
}
},

44
src/pages/login.vue
View File

@ -1,33 +1,20 @@
<template>
<div id="lll">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="审批人">
<el-input
v-model="formInline.user"
placeholder="审批人"
></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-input
v-model="formInline.pwd"
placeholder="审批人"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
<!-- [{name:"1232",ge:123}] -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID" width="180">
</el-table-column>
<el-table-column prop="name" label="名字" width="180">
</el-table-column>
<el-table-column prop="des" label="简介"> </el-table-column>
<el-table-column prop="cateId" label="cateId"> </el-table-column>
</el-table>
<st id="st"></st>
<div id="aaa">{{aaa}}</div>
<st id="st">
<template slot-scope="ccc">
这是默认的{{ccc}}
<!-- 当前 所有绑定的方法 和数据都是当前的 -->
</template>
<template v-slot:B="aaa">
这是给B的{{aaa}}
<!-- 当前 所有绑定的方法 和数据都是当前的 -->
</template>
<template slot="A" slot-scope="aaa">
这是给A的{{aaa}}
<!-- 当前 所有绑定的方法 和数据都是当前的 -->
</template>
</st>
</div>
</template>
@ -88,6 +75,7 @@ export default {
},
data() {
return {
name:"login",
formInline: {
user: "123",
pwd: "321",