15插槽

# 插槽

# 创建插槽

<mycomponent>
  内容
</mycomponent>

let mycomponent = {
  template:
    "<div><slot></slot></div>",
};

//根组件
new Vue({
  el: "#app",
  components: {
    mycomponent,
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

%accordion% 创建插槽练习🚀 %accordion%

<div id="app">
    <my-component1>
        我是一个插槽
    </my-component1>
</div>

<script>
    //局部组件（区域注册）子组件
    let myComponent1 = {
        //slot：插槽
        template: "<div><slot></slot></div>",

    };

    //父组件
    new Vue({
        el: "#app",
        data: {
        },
        components: {
            myComponent1,
        },
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

%/accordion%

# 具名插槽

<mycomponent>
  <div slot='a'>内容1</div>
  <div slot='b'>内容2</div>
</mycomponent>

let mycomponent = {
  template:
    "<div><slot name='a'></slot>内容x<slot name='b'></slot></div>",
};

//根组件
new Vue({
  el: "#app",
  components: {
    mycomponent,
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

%accordion% 具名插槽 ——就给他起名字🚀 %accordion%

<div id="app">
    <my-component1>
        <div slot="a">我是插槽1</div>
        <div slot="b">我是插槽2</div>

    </my-component1>
</div>

<script>
    //局部组件（区域注册）子组件
    let myComponent1 = {
        //slot：插槽
        template: "<div><slot name='a'></slot> ==楚河汉界== <slot name='b'></slot></div>",

    };

    //父组件
    new Vue({
        el: "#app",
        data: {
        },
        components: {
            myComponent1,
        },
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

打印出来的效果

我是插槽1
==楚河汉界==
我是插槽2

1
2
3

%/accordion%

# 默认插槽

<mycomponent>
  <div>内容1</div>
  <div slot='b'>内容2</div>
</mycomponent>

let mycomponent = {
  template:
    "<div><slot name='default'></slot>内容x<slot name='b'></slot></div>",
};

//根组件
new Vue({
  el: "#app",
  components: {
    mycomponent,
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 作用域插槽

使用v-slot可以提取出当前插槽的数据

<mycomponent :arr="arr">
  <template v-slot="{row,idx}">
    <button @click='show(row,idx)'>查看</button>
  </template>
</mycomponent>

let mycomponent = {
  props:{
    arr:{
      type:Array,
      required:true
    }
  },
  template: `
    <table border='1' cellspacing='0'>
      <tr>
        <td>商品名称</td>
        <td>商品数量</td>
        <td>商品价钱</td>
        <td>操作</td>     
      </tr>
      <tr v-for="(item,idx) of arr">
        <td>{{item.name}}</td>
        <td>{{item.num}}</td>
        <td>{{item.price}}</td>
        <td>
          <slot :row='item' :idx="idx"></slot>
        </td>     
      </tr>
    </table>
    `,
};

//根组件
new Vue({
  el: "#app",
  components: {
    mycomponent,
  },
  data: {
    arr: [
      { name: "苹果13", num: 1, price: 1000 },
      { name: "苹果14", num: 2, price: 2000 },
      { name: "苹果15", num: 3, price: 3000 },
    ],
  },
  methods: {
    show(row,idx){
      console.log(row)
      console.log(idx)
    }
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

%accordion% 作用域插槽练习🚀 %accordion%

<div id="app">
    <my-component1>
        <!-- 使用v-slot可以提取出当前插槽的数据 -->
        <template v-slot="{data}">🐱‍🐉插槽{{data}}</template>
    </my-component1>
</div>

<script>
    //局部组件（区域注册）子组件
    let myComponent1 = {
        //slot：插槽
        template: "<div><slot :data='msg'></slot></div>",

        data() {
            return {
                msg: "，👀作用域"
            }
        }
    };

    //父组件
    new Vue({
        el: "#app",
        data: {
        },
        components: {
            myComponent1,
        },
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

打印出来的效果

🐱‍🐉插槽，👀作用域

%/accordion%

作用域插槽里面使用具名插槽

<mycomponent :arr="arr">
  <template v-slot:a="{row,idx}">
    <button @click='show(row,idx)'>查看</button>
  </template>
  <template v-slot:b="{row,idx}">
    <button @click='show(row,idx)'>编辑</button>
  </template>
</mycomponent>

let mycomponent = {
  props:{
    arr:{
      type:Array,
      required:true
    }
  },
  template: `
    <table border='1' cellspacing='0'>
      <tr>
        <td>商品名称</td>
        <td>商品数量</td>
        <td>商品价钱</td>
        <td>操作</td>     
      </tr>
      <tr v-for="(item,idx) of arr">
        <td>{{item.name}}</td>
        <td>{{item.num}}</td>
        <td>{{item.price}}</td>
        <td>
          <slot name='a' :row='item' :idx="idx"></slot>
          <slot name='b' :row='item' :idx="idx"></slot>
        </td>     
      </tr>
    </table>
    `,
};

//根组件
new Vue({
  el: "#app",
  components: {
    mycomponent,
  },
  data: {
    arr: [
      { name: "苹果13", num: 1, price: 1000 },
      { name: "苹果14", num: 2, price: 2000 },
      { name: "苹果15", num: 3, price: 3000 },
    ],
  },
  methods: {
    show(row,idx){
      console.log(row)
      console.log(idx)
    }
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

# 案例插槽完整版

//作用域插槽 ——就给他起名字1️⃣
<div id="app">
    <my-component1 :list="goodsList">
        //使用v-slot可以提取出当前插槽的数据
        <template v-slot:a>
            <h1>第一个表格</h1>
        </template>
        <template v-slot:b="{row,idx}">
            <button @click="show(row,idx)">查看</button>
        </template>
    </my-component1>

    <my-component1 :list="goodsList1">
        //使用v-slot可以提取出当前插槽的数据
        <template v-slot:a>
            <h1>第二个表格</h1>
        </template>
        <template v-slot:b="{row,idx}">
            <button @click="show(row,idx)">编辑</button>
        </template>
    </my-component1>
</div>

<script>
    //局部组件（区域注册）子组件2️⃣
    let myComponent1 = {
        props: {
            list: {
                type: Array,
                required: true,
            },
        },
        //slot：插槽
        template: `
        <div>
            <slot name='a'></slot>
            <table border="1" cellspacing="0">
                <tr v-for='(item,idx) of list' :key='idx'>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <slot name='b' :row="item" :idx='idx'></slot>
                    </td>
                </tr>
            </table>
        </div>
        `,
    };

    //父组件3️⃣
    new Vue({
        el: "#app",
        data: {
            goodsList: [
                {
                    name: "🍎苹果",
                    price: 100,
                },
                {
                    name: "🍍菠萝",
                    price: 200,
                },
                {
                    name: "🍌香蕉",
                    price: 300,
                },
            ],
            goodsList1: [
                {
                    name: "🍉西瓜",
                    price: 100,
                },
                {
                    name: "🍒樱桃",
                    price: 200,
                },
                {
                    name: "🥝猕猴桃",
                    price: 300,
                },
            ],
        },
        components: {
            myComponent1,
        },
        methods: {
            show(row, idx) {
                console.log(idx);
            },
        },
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

编辑

上次更新: 2023/08/06, 00:38:41

← 14props验证 16动态组件→