vue a标签_Vue 插槽

最新推荐文章于 2022-09-02 23:13:00 发布

weixin_39879651

最新推荐文章于 2022-09-02 23:13:00 发布

阅读量316

点赞数

文章标签： vue a标签 vue template标签

Vue 插槽

1.插槽的简单使用

<body>
  <div id="app">
    <!-- 如果插槽没有替换的  就使用默认值 -->
    <cpn></cpn>
    <!-- 如果插槽没有替换的  就替换 -->
    <cpn><p>替换默认值</p></cpn>
  </div>
  <template id="cpn">
    <div>
      <h2>这里是组件</h2>
      <!-- 在组件中声明一个插槽  并且给一个默认值 默认值也可以为空 -->
      <slot><button>按钮</button></slot>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const vue = new Vue({
      el:"#app",
      data:{
        message:"hello VUE!"
      },
      components:{
        cpn : {
          template: "#cpn"
        }
      }
    })
  </script>
</body>

在组件中声明一个插槽

<template id="cpn">
  <div>
    <h2>这里是组件</h2>
    <!-- 在组件中声明一个插槽  并且给一个默认值 默认值也可以为空 -->
    <slot><button>按钮</button></slot>
  </div>
</template>

使用组件时可以替换插槽如果不替换插槽就使用默认值

<div id="app">
  <!-- 如果插槽没有替换的  就使用默认值 -->
  <cpn></cpn>
  <!-- 如果插槽没有替换的  就替换 -->
  <cpn><p>替换默认值</p></cpn>
</div>

2.具名插槽

<body>
    <div id="app">
        <!-- 指明需要替换的插槽  如将组件中test1插槽的按钮 替换成<a></a>标签 -->
        <cpn><a slot="test1" href="">用a标签替换按钮</a></cpn>
        <!-- 将组件中的test2中的内容替换 -->
        <cpn><p slot="test2">趣多多好吃,就是吃多了腻</p></cpn>
    </div>
    <template id="cpn">
        <div>
            <h2>这里是组件</h2>
            <slot name="test1"><button>按钮</button></slot>
            <slot name="test2"><p>蛋黄卷好吃</p></slot>
            <slot name="test3"><input placeholder="请输入内容">按钮</input></slot>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                message:"hello VUE!"
            },
            components:{
                cpn : {
                    template: "#cpn"
                }
            }
        })
    </script>
</body>

在组件中为插槽起名字

<template id="cpn">
        <div>
            <h2>这里是组件</h2>
            <slot name="test1"><button>按钮</button></slot>
            <slot name="test2"><p>蛋黄卷好吃</p></slot>
            <slot name="test3"><input placeholder="请输入内容">按钮</input></slot>
        </div>
</template>

使用组件时替换插槽内容时要指定插槽某个插槽

<div id="app">
        <!-- 指明需要替换的插槽  如将组件中test1插槽的按钮 替换成<a></a>标签 -->
        <cpn><a slot="test1" href="">用a标签替换按钮</a></cpn>
        <!-- 将组件中的test2中的内容替换 -->
        <cpn><p slot="test2">趣多多好吃,就是吃多了腻</p></cpn>
</div>

3.编译作用域概念

举例 : 实例里面的isShow 和子组件中的isShow

<body>
    <div id="app">
        <!-- 这里的isShow使用的是实例里面的变量,而不是模板中的变量 -->
        <!-- 使用变量时  会先去找变量所在的模板使用模板中的值   -->
        <cpn v-show="isShow"></cpn>
    </div>
    <template id="cpn">
        <div>
            <h2>这里是组件</h2>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                message:"hello VUE!",
                isShow: true
            },
            components:{
                cpn : {
                    template: "#cpn",
                    data(){
                        return{
                            isShow: false
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

4.作用域插槽

父组件之中想要使用子组件的变量由于编译作用域的问题不能直接使用

可以使用作用域插槽解决问题:

子组件插槽中绑定子组件的变量 :xxx="变量名"

<slot :abc="list">

父组件使用子组件

<template v-slot="slot">
  <span v-for="item in slot.abc">{{item}}</span>
</template>

<body>
    <div id="app">
        <!-- 这里的list使用的是实例里面的变量,而不是模板中的变量 -->
        <cpn><span v-for="item in list">{{item}}</span></cpn>


        <!-- 作用域插槽 -->
        <cpn>
            <!-- vue2.5 以上可以不用template 用div也行 -->
            <template v-slot="slot">
                <span v-for="item in slot.abc">{{item}}</span>
            </template>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <h2>这里是组件</h2>
            <!-- 插槽传递数据名字随意取 -->
            <slot :abc="list">
                <ul>
                    <li v-for="item in list">{{item}}</li>
                </ul>   
            </slot>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                message:"hello VUE!",
                isShow: true,
                name: "李四",
                list: ['合肥','南京','常州','上海','杭州']
            },
            components:{
                cpn : {
                    template: "#cpn",
                    data(){
                        return{
                            isShow: false,
                            list: ['张三','李四','王五','张刚','胡凯']
                        }
                    }
                }
            }
        })
    </script>
</body>

weixin_39879651

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue a标签_Vue 插槽

Vue 插槽1.插槽的简单使用<body> <div id="app">  <cpn></cpn>  <cpn><p>替换默认值</p></cpn&gt...
复制链接

扫一扫