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

24
src/components/st.vue
View File

@ -2,12 +2,29 @@
<div> <div>
<div> <div>
<p>{{name}}</p> <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> <button @click="fangfa">输出</button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default{ export default{
beforeCreate(){ beforeCreate(){
console.log("组建这是第一个") console.log("组建这是第一个")
}, },
@ -27,9 +44,10 @@ export default{
console.log("组建这是死透的") console.log("组建这是死透的")
}, },
data(){ data(){
return{ return{
name:"aaa", name:"aaa",
} list:"这是子组件的list"
}
}, },
methods:{ methods:{

44
src/pages/login.vue
View File

@ -1,33 +1,20 @@
<template> <template>
<div id="lll"> <div id="lll">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <st id="st">
<el-form-item label="审批人"> <template slot-scope="ccc">
<el-input 这是默认的{{ccc}}
v-model="formInline.user" <!-- 当前 所有绑定的方法 和数据都是当前的 -->
placeholder="审批人" </template>
></el-input> <template v-slot:B="aaa">
</el-form-item> 这是给B的{{aaa}}
<el-form-item label="活动区域"> <!-- 当前 所有绑定的方法 和数据都是当前的 -->
<el-input </template>
v-model="formInline.pwd" <template slot="A" slot-scope="aaa">
placeholder="审批人" 这是给A的{{aaa}}
></el-input> <!-- 当前 所有绑定的方法 和数据都是当前的 -->
</el-form-item> </template>
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button> </st>
</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>
</div> </div>
</template> </template>
@ -88,6 +75,7 @@ export default {
}, },
data() { data() {
return { return {
name:"login",
formInline: { formInline: {
user: "123", user: "123",
pwd: "321", pwd: "321",