vue element-ui中popover弹出框内容content使用slot实现

最近写代码用到popover,但是我需要popover的内容content是动态变化的，查看popover定义的相关参数，提到了content官方说明是：content显示的内容，也可以通过 slot 传入 DOMString我一看到slot就害怕，然后找到了这篇文章链接: https://www.jianshu.com/p/d4f36ee0598d.写的很详细，主要是有实例，就算不懂slot,也

meili没有鱼

19124人浏览 · 2021-01-02 15:28:38

meili没有鱼 · 2021-01-02 15:28:38 发布

最近写代码用到popover,但是我需要popover的内容content是动态变化的，查看popover定义的相关参数，提到了content
官方说明是：
content 显示的内容，也可以通过 slot 传入 DOM String
我一看到slot就害怕，然后找到了这篇文章链接: https://www.jianshu.com/p/d4f36ee0598d.
写的很详细，主要是有实例，就算不懂slot,也可以套，开心！
我对slot其实还是很迷糊–——就先简单先认为他是一个占位符
按着别人的叙述做几个例子叭

创建使用组件的方式

使用slot涉及到组件的使用,简单的列出了三种方式。

//script代码
  //方式一如下
var kun = Vue.extend({template: `<el-button type="success">伤心</el-button>`})
  Vue.component("kun",kun)
  //方式二如下
  Vue.component("yang",{template:'#template-second'})
  //方式三如下
  Vue.component("meili", Vue.extend({
    template: `<el-button type="success">快乐</el-button>`
  }))
  var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  }
})

//方式二的html代码,注意template不要放在你vue对象中，我创建的vue对象是app,那么我的template就不会放在app中，
<body>
  <div id="app">
  <yang></yang>
    //.........
  </div>
  <template id="template-second">
      <div>
        <ul>
          <li>汉堡</li>
          <li>牛奶</li>
          <li>甜甜圈</li>
        </ul>
      </div>
    </template>
</body>

popover的使用

popover也属于一个组件，只是官方给封装好了，引入之后，直接使用就好，不需要再注册了。也就是说上面的那几种方式自定义组件需要用到，我们用ui组件库是不需要的啦！

<el-popover
    placement="top-start"
    title="标题"
    width="200"
    trigger="hover"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    <el-button slot="reference">hover 激活</el-button>
  </el-popover>

content内容是写死的，我的需求是content内容动态变化的，这里就需要使用插槽。官方说content可以通过slot传入dom,这个slot咋用啊，我的天
源码

<template>
  <span>
    <transition
      :name="transition"
      @after-enter="handleAfterEnter"
      @after-leave="handleAfterLeave">
      <div
        class="el-popover el-popper"
        :class="[popperClass, content && 'el-popover--plain']"
        ref="popper"
        v-show="!disabled && showPopper"
        :style="{ width: width + 'px' }"
        role="tooltip"
        :id="tooltipId"
        :aria-hidden="(disabled || !showPopper) ? 'true' : 'false'"
      >
        <div class="el-popover__title" v-if="title" v-text="title"></div>
        <slot>{{ content }}</slot>
      </div>
    </transition>
    <slot name="reference"></slot>
  </span>
</template>

使用slot

<el-popover
    placement="top-start"
    title="我想吃"
    width="400"
    trigger="hover"
  >
  //slot插入
    <ul>
      <li>
     {{message}}//可以动态变化了
      </li>
    </ul>
  //插入结束
    <el-button slot="reference">
      点一个
    </el-button>
  </el-popover>