vue 中使用 jsx 总结

vue 中使用 jsx 总结

调用方式

• 标签函数组件

  // 模式1: 类式函数组件
  const Sub = {
      functional: true,
      name: "Sub",
      render(h, context){...}
  }
      
  // 模式2: 函数式函数组件
  const Sub = (context) => ( <div> { context.props.title } </div> )
                            
                            
  // 标签式调用
  <template>
    <Sub title='函数式组件' />                        
  </template>
                            
  // 注册为组件
  {
                            
  	components: { 'l-sub': Sub }                          
                            
  }
  
  
  // 可以直接使用函数作为组件的原因是，vue会将函数式函数组件 转换为 类式函数组件
  

• 函数组件

  // 可以使用直接调用函数的形式调用组件
  function Sub(h, title){
      return ( <div> { title } </div> )
  }
  
  // 调用
                              
  {
  	render(h){
      	return ( <div> { Sub("jsx title") } </div>  )
  	}                            
  }
  
  
  // 这里 h[createElement] 函数是必须的, vue 将使用该函数渲染组件
  
  

为什么存在两种调用模式

这里我们可以直接打印出组件函数，查看vue对两者的不同处理

• 标签模式

const Tagsub = (context) => ( <div> { context.props.title } </div> )
console.log(Tagsub)

/**
  * { 
     	functional: true,
        name: "Sub",
        render(h, context){...} 	
    }
  */

• 函数模式

function Fnsub(h, title){
    return ( <div> { title } </div> )
}
                              
console.log(Fnsub)

/** 
  	ƒ Fnsub(h, title) {
      return h("div", [" ", title, " "]);
    }
  */

通过比较我们知道，vue 对不同编写方式的不同解析，造成了不同的调用方式, 所以虽然都是函数式组件,

但 标签模式 不能直接通过函数的方式调用，因为已经被编译成类

而函数模式 需要传入 createElement 函数, 且不能作为标签直接调用，应为无法获取到 createElement函数

除此外，两者获取的参数也是有所不同.

传值/取值

• 标签类函数组件 通过 context 参数获取组件上的参数 详情

• 函数类函数组件 可以参考 react 传参， 函数接收的参数既是组件获取的参数

插槽

jsx 中没有 <slot /> 标签, 我们可以通过高阶函数 或 $scopedSlots 属性 提供组件嵌套功能

• 高阶函数

  const Title = context => <h1> title </h1>
  const Content = context => <p> content </p>
  const Wrap =(Title, Content) => {
    return {
      render(h){
        return (
          <div>
            <Title />
            <Content />
          </div>
        )
      }
    }
  }
  
  // 使用1: 注册为组件
  {
      components: { article: Wrap(Title, Content) }
  }
  
  // 使用2：jsx
  {
  	render(h){
          const Article = Wrap(Title, Content)
  		return ( <Article /> )
      }    
  }
  

  这里 Wrap 返回一个组件类，而不是直接返回标签模板, 如果直接返回标签模板， Wrap 将被识别为函数组件而不是单纯的包装函数

• 属性

  // 类似 react children 我们可以将组件作为属性传给嵌套组件
  
  const Title = context => <h1> { context.props.title } </h1>
  const Content = context => <p> content </p>
  const Article = context => {
  
    const Title = context.props.title
    const Content = context.props.content
    
    return (
      <div>
  
        <Title title='article title' />
        <Content />
        
      </div>
    )
    
  }
  
  
  // 使用1: 注册为组件
  {
      components: { Article }
  }
  
  // 使用2：jsx
  {
  	render(h){
  		return ( <Article title={ Title } content={Content} /> )
      }    
  }
  
  
  

• $scopedSlots

// vue 原生提供插槽属性, 我们可以直接使用该属性 实现嵌套

// 设置作用域插槽
const Article = context => {
  
  // 因为需要获取参数,所以作用域插槽返回函数
  const titleSlot = context.scopedSlots.title
  const contentSlot = context.scopedSlots.content
  
  return (
    <div>
      { titleSlot({title: 'article title'}) }
      { contentSlot({content: 'article content'}) }
    </div>
  )
  
}

// 使用1: 标签
<template>
    
  <Article>
    <h1 slot='title'  slot-scope="slotProps">
      {{ slotProps.title }}
    </h1>
    <p slot='content'  slot-scope="slotProps">
      {{ slotProps.content }}
    </p>
  </Article>
    
</template>
<script>
export default {
	components: {
        Article
    }
}
</script>

// 使用2：jsx
{
    render(h){
        
        const scopedSlots = {
            title: data => (<h1> { data.title } </h1>),
            content: data => ( <p> { data.content } </p> )
        }
        
        return (
        	<Article scopedSlots={ scopedSlots } />
        )
    }
}