Vue指定组件内容的三种方式（el， template ，render）

2024-07-18 09:09| 来源: 网络整理| 查看: 265

指定组件显示的内容：new Vue({选项})

el 选项，通过一个选择器找到容器，容器内容就是组件内容

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

在实例挂载之后，元素可以用 vm.$el 访问。

如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

项目中会有index.html 文件,里面会存在一个div

于main.js 中挂载，下面两种写法一样的。

new Vue().$mount('#app') // 或者 new Vue({ el: '#app' })

template 选项

一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素，挂载元素的内容都将被忽略。

const vm = new Vue({ el: '#app', template: ` xxx `, })

render选项

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

它是一个函数，函数回默认传人createElement的函数（h），这个函数用来创建结构，再render函数返回渲染为组件内容。它的优先级更高。

Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

import App from './App.vue' new Vue({ render:h=>h(App) }).mount('#app') // h() =====> createElement() // h(App) =====> 根据APP组件创建html结构 // render的返回值就是html结构，渲染到#app容器 // h() 函数参数，1.节点名称 2. 属性|数据是对象 3. 子节点

vue2.0 的h函数传参进来的，vue3.0 的h函数导入进来 h 第一个参数标签名字第二个参数标签属性对象第三个参数子节点

// vue2.0 的h函数传参进来的，vue3.0 的h函数导入进来 // render: h => { // // 返回值就是组件内容 // return h() // } import { h } from 'vue' export default { name: 'AppBread', render () { // 返回值就是组件内容 // h 第一个参数标签名字第二个参数标签属性对象第三个参数子节点 return h('div', { class: 'app-bread' }, '我是内容') } }

可以通过this.$slots来获取插槽内容

// 获取默认插槽的内容 const soltList = this.$slots.default()

可以动态的去创建节点例如：

render () { // 返回值就是组件内容 // h 第一个参数标签名字第二个参数标签属性对象第三个参数子节点 // 获取默认插槽的内容 const soltList = this.$slots.default() // 动态创建节点最后一个item不加i标签 const dymanicItems = [] soltList.forEach((item, i) => { if (i === soltList.length - 1) return dymanicItems.push(item) // 在每个item元素后面加一个i标签（箭头）最后一个不加 dymanicItems.push(item, h('i', { class: 'iconfont icon-angle-right' })) }) return h('div', { class: 'app-bread' }, dymanicItems) }

【本文地址】

公司简介

联系我们