vue-render函数和插槽

Vue render函数,官方文档定义绝大部分时候我们使用template 来创建html 模板,但是纯html 和css都基本上都不具有编程能力,而当我们想使用

  javascript的编程能力时,我们可以用render 函数来创建html 模板

  1.使用简单的tamplate 去创建html 模板

// 使用简单的template 去创建html 模板
new Vue({
        el:'#test',
        data:{
            msg:'czczczcz'
        },
        template: '<h1> {{this.msg}} </h1>' // 我们使用template 去创建html 模板
    })

  2.当我们现在需求比较复杂,根据传入的一组标签组去创建模板,让我们先看看使用tamplate的方法

<div id="test">
    <div v-html="jstem()">
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el:'#test',
        data:{
            msg:['h1','h3','span','ul'] //简单的一组标签组
        },
        // 如果是直接使用标签我实在没想到办法 。我能想到的只能是        
        methods: {
            jstem () {
                let html = '';
                if(this.msg) {
                    this.msg.forEach(item => {
                        html += `<${item}>${item}</${item}>`
                    })
                }
                return html
            }
        }
    })
</script>

  上面的话还是使用javascript的编程你能力,我总结的是,就是当组件的html 模板都不固定,可能都需要一定的业务逻辑才能确定时,我们就可以考虑去使用render 函数,创建html模板,官方文档还讲明,template 最终还是要通过模板解析的,一系列底层操作后生成虚拟dom,而rander函数比tamplate更接近编辑器,也就是更容易转话成虚拟dom。

  render 函数  

    render 函数传入一个createElement 方法,而这个方法,我们一般简写为h ,可以参阅vue-cli main.js 的 render: h => h(App)

<div id="test">
    
</div>
<script type="text/javascript">
    new Vue({
        el:'#test',
        data:{
            msg:['h1','h3','span','ul'] //简单的一组标签组
        },
        render: function(h) {
            return h(
                'div', //传入的为一个节点的名称
          {},
this.msg.map(function(item){ //第二个传入的为节点的值,值可以时一组元素节点 return h(item,item) }) ) } })
  </script>
 

  render 函数内传入的第二个参数 data ,一系列属性,包括 class,style,arrts,props,domprops,on,nativeOn,directives,scopedSlots,slot,key,ref,refInfor

具体的用法请详见官方文档

 

  vue 插槽,主要是用于组件标签内信息,在组件内部展示,最新的slot 和slot-scope已经被官方放弃,且不会出现Vue3中,vue 新引入了v-slot 指令

    官方文档上的列子

//定义一个baseLayout 组件
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
// 上面定义了一个子组件, 子组件有三个插槽,header,footer,还有一个匿名插槽,其实是default

// 父组件内容  使用了v-slot 
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

// 如果不使用v-slot 旧特性,定义具名
<base-layout>
    <h1 slot='header'>Here might be a page title</h1>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
    <p slot='footer'>Here's some contact info</p>
  </slot >

最终会渲染出
<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

  具名插槽v-slot 的缩写为#

     v-slot='header'  可以写成 #header

转载于:https://www.cnblogs.com/czkolve/p/10666599.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue.js中,render函数用于将组件的模板渲染成虚拟DOM。通过编写render函数,我们可以手动定义组件的渲染逻辑,而不是使用模板语法。在Vue2中,可以在Vue实例的选项中编写render函数,并使用Vue的渲染器将其调用。render函数接收一个参数h,它是一个用于创建虚拟DOM的函数。在render函数中,我们可以使用h函数来创建各种节点,例如div、span等。我们可以通过调用h函数并传入标签名称和其他选项来创建节点。在render函数中,this指向当前的Vue实例,因此我们可以直接访问Vue实例的data数据、props、等元素。这样可以方便地在render函数中使用这些数据来动态生成虚拟DOM。此外,我们还可以在render函数中创建包含全局组件或异步组件的vnode。可以通过在h函数的第一个参数中传入组件选项来创建包含全局组件的vnode。同样,对于异步组件,也可以在h函数的第一个参数中传入异步组件的选项来创建相应的vnode。通过编写render函数,我们可以更加灵活地控制组件的渲染过程,并实现更复杂的渲染逻辑。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue2的render函数你用过吗?](https://blog.csdn.net/pfourfire/article/details/124682597)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值