vue render插槽使用

最新推荐文章于 2025-06-19 10:07:10 发布

原创最新推荐文章于 2025-06-19 10:07:10 发布 · 1.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该博客展示了如何在Vue中创建和使用组件，包括`slotsTest`和`scopedSlotsTest`。内容涵盖了基本按钮组件的创建、输入框的使用，以及插槽的应用，包括普通插槽和具名插槽的示例。在`slotsTest`组件中，通过`$slots`和`$scopedSlots`访问和渲染插槽内容，同时监听插槽数据的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建render.jsx

import './render.scss'
import { slotsTest, scopedSlotsTest } from './render-slots/slots'
const buttons = {
  name: 'Buttom',
  data() {
    return {
      text: '测试'
    }
  },
  render() {
    return <el-button type='primary'>{this.text}</el-button>
  }
}
export default {
  name: 'Render',
  components: { slotsTest },
  data() {
    return {
      input: ''
    }
  },
  methods: {
  },
  render() {
    return <div Class='render-box'>
      <el-input vModel={this.input} />
      <buttons/>
      <slots-test>
        <template slot='test'>
          render=====
        </template>
      </slots-test>
      <hr/>
      <scopedSlotsTest form={{ value: 1 }} {...{ scopedSlots: {
        scopeds: ({ item }) => {
          return <el-input vModel={item.value} />
        }
      }}}>
      </scopedSlotsTest>
    </div>
  }
}

创建 slots.jsx

import '../render.scss'

export const scopedSlotsTest = {
  name: 'SlotsTest',
  props: {
    form: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      name: this.form
    }
  },
  watch: {
    name() {
      console.log(this.name, 'watch')
    }
  },
  render() {
    console.log(this.name)
    let slots
    if (this.$scopedSlots.scopeds) {
      slots = <div>
        {this.$scopedSlots.scopeds({
          item: this.name
        })}
      </div>
    } else {
      slots = 'scopedSlots'
    }
    return <div>
      scopedSlots 插槽
      <br/>
      { slots }
    </div>
  }
}
export const slotsTest = {
  name: 'SlotsTest',
  data() {
    return {
    }
  },
  render() {
    let slots
    if (this.$slots.test) {
      slots = this.$slots.test
    } else {
      slots = 'slotsTest'
    }
    return <div>
      slotsTest 插槽
      <br/>
      <div>
        {slots}
        {console.log(this.$slots.test)}
      </div>
    </div>
  }
}