vue插槽

最新推荐文章于 2024-04-15 15:42:58 发布

weixin_33856370

最新推荐文章于 2024-04-15 15:42:58 发布

阅读量62

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/buqianqian/p/10982412.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('modal', {
      template: `
        <div>
          <p>first line</p>
          <p>last line</p>
        </div>
      `
    })

    var vm = new Vue({
      el: '#app',
    })
  </script>
</body>
</html>

我们先创建了一个vue的实例，并且注册了一个名为modal的全局组件。此时打开浏览器的话页面时没有内容的，我们注册的组件还没放进根实例中。

  <div id="app">
    <modal></modal>
  </div>

这时，我们把组件放进根实例中打开浏览器便有了效果。如下图所示：

一：单个插槽/匿名插槽

<body>
  <div id="app">
    <modal>哈哈</modal>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('modal', {
      template: `
        <div>
          <p>first line</p>
          <div><slot></slot></div>
          <p>last line</p>
        </div>
      `
    })

    var vm = new Vue({
      el: '#app',
    })
  </script>
</body>

我们在first line和last line之间写上一个slot，并在modal填上内容，此时内容就可以通过slot显示出来，我们写的<slot></slot>就叫做单个插槽。如下图所示：

我们也可以在modal之前写上标签并且编辑样式

<modal>
  <span style="color: red">哈哈</span>
  <span>呵呵</span>
  <h1>1234</h1>
</modal>

如下图所示

二：但是，我们现在要想在我们的组件中再写一个插槽的话，将另外的内容放进第二个插槽里，我们还能这样写吗？

Vue.component('modal', {
     template: `
        <div>
          <p>first line</p>
          <div><slot></slot></div>
          <p>last line</p>
          <slot></slot>
        </div>
      `
})

很显然，我们modal中的内容都显示在了我们的两个匿名插槽中。

这时，我们可以给我们的插槽取个名字，并且将我们modal中自定义的内容加上我们刚才的名字。

 1 <div id="app">
 2     <modal>
 3       <span style="color: red" slot="s1">哈哈</span>
 4       <span slot="s1">呵呵</span>
 5       <h1 slot="s2">1234</h1>
 6     </modal>
 7   </div>
 8   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9   <script>
10     Vue.component('modal', {
11       template: `
12         <div>
13           <p>first line</p>
14           <div><slot name="s1"></slot></div>
15           <p>last line</p>
16           <slot name="s2"></slot>
17         </div>
18       `
19     })
20 
21     var vm = new Vue({
22       el: '#app',
23     })
24 </script>

View Code

这个时候，我们自定义内容就分别显示在我们不同的插槽中啦。

三：作用域插槽

假设我们现在想要在插槽中显示动态数据，那么就要用到了作用域插槽。如下图，想在first line和last line中动态显示数据：

<body>
  <div id="app">
    <modal>
      <template slot-scope="scope">
        {{scope.msg}}
      </template>
    </modal>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('modal', {
      template: `
        <div>
          <p>first line</p>
          <div><slot :msg="msg"></slot></div>
          <p>last line</p>
        </div>
      `,
      data () {
        return {
          msg: '111'
        }
      }
    })

    var vm = new Vue({
      el: '#app',
    })
  </script>
</body>

在modal组件中我们需要返回动态数据给插槽，在slot中我们要绑定data中的数据，并在父级modal中添加template，加上slot-scope指令，template中我们可以使用插值表达式显示内容。

转载于:https://www.cnblogs.com/buqianqian/p/10982412.html

weixin_33856370

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫