vue render实现不同用户在同一页面渲染不同组件

vue render实现不同用户在同一页面渲染不同组件

我们日常生活中会使用导航菜单,不同的用户进入菜单内容会有所不同

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。
虽然可以使用v-if进行判断，但是代码冗长，所以我们可以使用render函数

render
类型：(createElement: () => VNode) => VNode
详细：
字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

简单的举个例子
下面展示一些 内联代码片。

<script>
import Template1 from './template1'
import Template2 from './template2'
import Template3 from './template3'
import Template4 from './template4'
export default {
  components: {
    Template1,Template2,Template3,Template4
  },
  name: 'home',
  data () {
    return {
      msg: '1'
    }
  },
   render(createElement) {
     if(this.msg == 1) {
        return createElement(Template1)
     } else if(this.msg == 2) {
        return createElement(Template2)
     }else if(this.msg == 3) {
        return createElement(Template3)
     }
     else if(this.msg == 4) {
        return createElement(Template4)
     }
     
    }
}
</script>
</style>

创建4个组件，引入到home.vue(上方代码)，msg表示不同用户，使用render进行判断渲染哪个组件，就是那么简单