vue render插槽使用

该博客展示了如何在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>
  }
}
### 基本插槽使用Vue 中,插槽(Slot)是一种非常强大的功能,它允许你将内容插入到组件的特定位置。基本插槽的定义非常简单,只需要在组件的模板中使用 `<slot></slot>` 标签即可。以下是一个简单的带插槽的组件示例: ```javascript Vue.component('alert-box', { template: ` <div class="alert-box"> <strong>重要提示!</strong> <slot></slot> </div> ` }); ``` 在这个例子中,`<slot></slot>` 标签表示插槽的位置。当使用 `alert-box` 组件时,你可以在这部分插入自定义的内容[^1]。 ### 具名插槽使用 如果你需要在组件中定义多个插槽,可以使用具名插槽(Named Slots)。通过给每个 `<slot>` 标签指定一个 `name` 属性,可以区分不同的插槽位置。例如: ```html <!-- 子组件 --> <template> <div> <slot name="header"></slot> <slot name="body"></slot> <slot name="footer"></slot> </div> </template> ``` 在父组件中使用该子组件时,可以通过 `v-slot` 指令来指定内容插入到哪个插槽中: ```html <FancyButton> <template v-slot:header> <h1>这是头部内容</h1> </template> <template v-slot:body> <p>这是主体内容</p> </template> <template v-slot:footer> <button>点击我</button> </template> </FancyButton> ``` 这样,父组件中的内容就会根据 `v-slot` 的名称插入到子组件相应的插槽位置上[^4]。 ### 作用域插槽使用 有时候,你可能希望插槽的内容能够访问到子组件的数据。这时就需要使用作用域插槽(Scoped Slots)。作用域插槽允许你在父组件中定义插槽内容,并且这些内容可以访问子组件的数据。例如,在子组件中定义如下插槽: ```html <!-- 子组件 --> <template> <div> <slot name="customSlot" :title="title" :content="content"></slot> </div> </template> <script> export default { data() { return { title: '这是一个标题', content: '这是一段内容' }; } }; </script> ``` 在父组件中,你可以通过 `v-slot` 来接收这些数据并渲染内容: ```html <FancyButton> <template v-slot:customSlot="{ title, content }"> <div> <h2>{{ title }}</h2> <p>{{ content }}</p> </div> </template> </FancyButton> ``` 这样,父组件就可以利用子组件传递过来的数据来动态生成插槽内容[^3]。 ### 使用渲染函数处理插槽 对于更高级的应用场景,你可以使用 Vue 的渲染函数来处理插槽。在渲染函数中,可以通过 `this.$slots` 来获取插槽内容,并将其与生成的虚拟 DOM 结合起来。例如: ```javascript export default { name: 'ScopedChild', render(h) { return h('div', [ h('h2', '子组件标题'), this.$slots.customSlot // 获取插槽内容 ]); } }; ``` 在这个例子中,`this.$slots.customSlot` 会获取名为 `customSlot` 的插槽内容,并将其包含在生成的虚拟 DOM 中[^2]。 ### 总结 以上介绍了 Vue插槽的基本用法,包括基本插槽、具名插槽、作用域插槽以及如何在渲染函数中处理插槽。通过合理地使用插槽,可以使你的组件更加灵活和可复用。无论是简单的单个插槽还是复杂的多插槽结构,都可以通过上述方法实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值