vue实例属性之el,template,render--(转载)

转载链接:https://www.cnblogs.com/camille666/p/vue_instance_prop_el_template_render.html

 

一、el,template,render属性优先性
当Vue选项对象中有render渲染函数时,Vue构造函数将直接使用渲染函数渲染DOM树,当选项对象中没有render渲染函数时,Vue构造函数首先通过将template模板编译生成渲染函数,然后再渲染DOM树,而当Vue选项对象中既没有render渲染函数,也没有template模板时,会通过el属性获取挂载元素的outerHTML来作为模板,并编译生成渲染函数。
换言之,在进行DOM树的渲染时,render渲染函数的优先级最高,template次之且需编译成渲染函数,而挂载点el属性对应的元素若存在,则在前两者均不存在时,其outerHTML才会用于编译与渲染。
1、写html文件

<div class="vapp-1">{{ info }}</div>
<div class="vapp-2">{{ info }}</div>
<div class="vapp-3">{{ info }}</div>

2、写js文件

new Vue({
  el: '.vapp-1',
  data: {
    info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
  },
  template: '<div>这是template属性模板渲染。</div>',
  render: function(h){
    return h('div', {}, '这是render属性方式渲染。')
  }
})

new Vue({
  el: '.vapp-2',
  data: {
    info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
  },
  template: '<div>这是template属性模板渲染。</div>'
})

new Vue({
  el: '.vapp-3',
  data: {
    info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
  }
})

3、查看渲染结果
这是render属性方式渲染。
这是template属性模板渲染。
这是通过el属性获取挂载元素的outerHTML方式渲染。

二、独立构建和运行时构建
Vue.js 1.0,编译器需要依赖浏览器的DOM,所以无法将编译器和运行时分开。因此在Vue.js 1.0分发包中,编译器和运行时是打包在一起,都在浏览器端执行。
Vue.js 2.0,为了支持服务端渲染(server-side rendering),编译器不能依赖浏览器的DOM,所以必须将编译器和运行时分开。于是形成了独立构建(编译器 + 运行时)和运行时构建(仅运行时)。显而易见,运行时构建体积要小于独立构建。

1、模板编译器
模板编译器的职责是将模板字符串编译为纯JavaScript的渲染函数,即将<template>编译成render函数。
2、Vue.js的执行过程
包含编译过程和运行过程,在编译过程,编译器将字符串模板(template)编译为渲染函数(render)
在运行过程,调用渲染函数。
3、运行时构建
运行时构建指不能进行模板编译的Vue库。运行时构建不包含模板编译器,即不支持template选项,如果使用vue-loader和vueify预编译模板,只需要打包运行时,而不需要打包编译器。
运行时构建,可以用render选项,但它只在单文件组件中起作用,因为单文件组件的模板是在构建时预编译到render函数中,运行时构建只有独立构建大小的30%,只有16Kb min+gzip大小。

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hello)
  }
})

4、独立构建
独立构建指能够将template模板或者从el挂载元素提取的模板编译成渲染函数的Vue库,独立构建包含模板编译器,可以用template选项实时编译模板。

// 需要编译器
new Vue({
  template: '<div>{{ hello }}</div>'
})

使用vue-cli生成项目时,会提醒使用哪种构建方式,npm包默认导出的是运行时构建,即runtime版本vue.runtime.common.js,如果想使用独立构建,需要在webpack.config.js中配置alias。

resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
}





转载于:https://www.cnblogs.com/-colin/p/10474893.html

<think>嗯,用户现在问的是关于Vueel-table-column动态插槽的问题。首先,我需要确认用户提到的el-table-column是Element UI组件库中的表格列组件。动态插槽通常是指在表格列中使用作用域插槽,并且可能需要根据不同的条件或数据动态地渲染内容。 用户可能已经了解Element UI的基本表格用法,但现在遇到了需要动态生成列内容的情况。例如,他们可能希望根据不同的数据字段或配置来动态决定每一列如何显示,比如有的列需要显示按钮,有的需要格式化日期,或者其他自定义内容。 我需要回忆一下Element UI的表格组件是如何使用插槽的。在Element UI的el-table-column中,作用域插槽允许我们自定义单元格的内容。通常,我们会使用template标签结合v-slot来访问行数据。例如: <el-table-column prop="name" label="姓名"> <template v-slot="{ row }"> {{ row.name }} </template> </el-table-column> 但用户提到的是动态插槽,这可能意味着他们需要在运行时根据某些条件动态决定插槽的内容。比如,列配置可能来自后端或用户设置,这时候需要动态生成不同的插槽内容。 这时候,我需要考虑如何动态绑定插槽。Vue 2Vue 3在插槽的使用上有些不同,但用户可能是在使用Vue 2,因为Element UI主要支持Vue 2。不过,如果是Element Plus,则对应Vue 3。需要确认这一点,但用户可能没有说明,所以假设是Vue 2Element UI。 在Vue中,动态插槽名称可以使用v-slot的方括号语法,比如v-slot:[dynamicSlotName]。但作用域插槽的情况可能需要结合作用域来传递数据。例如,动态决定插槽的名称,并且传递相应的数据。 不过,在el-table-column中使用动态插槽可能有不同的方法。因为el-table-column的作用域插槽是固定的,即默认插槽,或者可以通过具名插槽。但通常情况下,每个el-table-column的作用域插槽都是通过默认插槽来定义的。 可能的解决方案是,在遍历生成el-table-column的时候,为每个列动态生成对应的插槽内容。例如,使用v-for循环生成多个el-table-column,并且每个列根据配置决定其插槽内容。 例如,假设有一个columns数组,每个元素包含prop、label和一个render函数或组件,那么可以在v-for循环中生成el-table-column,并在每个列中使用作用域插槽,根据配置来渲染内容。 代码示例可能如下: <el-table :data="tableData"> <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" > <template v-slot="{ row }"> <!-- 动态渲染内容 --> <component v-if="column.component" :is="column.component" :row="row" /> <span v-else>{{ row[column.prop] }}</span> </template> </el-table-column> </el-table> 这里,columns数组中的每个column可以指定一个component,用于动态渲染该列的内容。或者,可能使用render函数或插槽名称来动态决定如何显示。 用户的问题可能涉及到如何灵活地根据不同的列配置,动态应用不同的插槽模板。例如,某些列可能需要按钮,某些需要图标,或者需要条件渲染。 此外,可能需要考虑动态插槽名称的情况。例如,根据某个变量来决定插槽的名称,但这在Element UI的表格中可能不太常见,因为每个列的插槽是独立的。不过,如果用户希望动态地绑定不同的具名插槽,可能需要更复杂的结构。 另外,用户可能在尝试实现类似动态表单或动态表格配置的功能,允许用户自定义列的显示方式,这时候动态插槽非常有用。 需要注意,Element UI的el-table-column在渲染时,每个列的作用域插槽是独立的,因此在循环生成列时,每个列的作用域插槽可以单独定义,并且根据列的不同配置来动态渲染内容。 可能的另一个情况是,用户希望在某些条件下覆盖默认的插槽内容,例如,当某个列需要特殊处理时,动态地替换其显示内容,而不是静态地定义每个列的插槽。 总结一下,用户可能需要的是在动态生成的el-table-column中,根据列的不同配置,动态地决定如何渲染该列的内容,而这可以通过在v-for循环中使用作用域插槽,并根据列的配置来渲染不同的组件或内容来实现。 需要给出具体的示例代码,说明如何动态配置列,并在插槽中使用动态组件或条件渲染。同时,提醒用户注意key的使用,避免渲染问题,以及在动态生成组件时可能需要正确传递props和处理事件。 可能的错误点包括:未正确绑定作用域插槽的数据,动态组件未正确引入或注册,或者在循环中未正确处理唯一key的问题。需要指出这些注意事项,帮助用户避免常见问题。 最后,可能需要比较动态插槽与其他方法(如使用formatter属性或cell-class-name)的优缺点,说明动态插槽的灵活性和适用场景。</think>在 VueElement UI 中,`el-table-column` 的**动态插槽**主要用于根据数据或配置灵活定制表格列的渲染内容。以下是具体实现方法和示例: --- ### **1. 基础作用域插槽** 默认情况下,`el-table-column` 通过作用域插槽 (`v-slot`) 提供对行数据的访问: ```vue <el-table :data="tableData"> <el-table-column prop="name" label="姓名"> <template v-slot="{ row }"> <span style="color: blue">{{ row.name }}</span> </template> </el-table-column> </el-table> ``` --- ### **2. 动态插槽的核心场景** 当需要 **动态生成列** 或 **根据不同条件渲染不同内容** 时,需结合 `v-for` 循环和动态插槽逻辑: ```vue <el-table :data="tableData"> <!-- 动态遍历列配置 --> <el-table-column v-for="col in dynamicColumns" :key="col.prop" :prop="col.prop" :label="col.label" > <template v-slot="{ row }"> <!-- 根据列配置渲染不同内容 --> <div v-if="col.type === 'button'"> <el-button @click="handleClick(row)">操作</el-button> </div> <span v-else-if="col.type === 'date'"> {{ formatDate(row[col.prop]) }} </span> <span v-else>{{ row[col.prop] }}</span> </template> </el-table-column> </el-table> <script> export default { data() { return { tableData: [/* 表格数据 */], dynamicColumns: [ { prop: 'name', label: '姓名', type: 'text' }, { prop: 'date', label: '日期', type: 'date' }, { prop: 'action', label: '操作', type: 'button' } ] }; }, methods: { formatDate(date) { return new Date(date).toLocaleString(); }, handleClick(row) { console.log('点击行数据:', row); } } }; </script> ``` --- ### **3. 动态组件进阶用法** 若需更复杂的渲染逻辑,可通过 **动态组件** (`<component :is="...">`) 实现: ```vue <template> <el-table :data="tableData"> <el-table-column v-for="col in dynamicColumns" :key="col.prop" :label="col.label" > <template v-slot="{ row }"> <!-- 根据列配置加载不同组件 --> <component :is="col.component" :row="row" v-bind="col.props || {}" /> </template> </el-table-column> </el-table> </template> <script> import StatusBadge from './StatusBadge.vue'; import CustomButton from './CustomButton.vue'; export default { components: { StatusBadge, CustomButton }, data() { return { tableData: [ { id: 1, status: 'success', action: '编辑' }, { id: 2, status: 'error', action: '删除' } ], dynamicColumns: [ { label: '状态', component: 'StatusBadge', props: { colorMapping: { success: 'green', error: 'red' } } }, { label: '操作', component: 'CustomButton', props: { icon: 'el-icon-edit' } } ] }; } }; </script> ``` --- ### **4. 动态插槽的注意事项** | **场景** | **解决方案** | |--|-----------------------------------------------------------------------------| | **动态列数据更新** | 使用 `Vue.set` 或返回新数组更新列配置,确保响应式触发 | | **插槽内容复用** | 通过 `mixins` 或全局组件封装通用渲染逻辑 | | **性能优化** | 避免在插槽内频繁计算,使用 `computed` 缓存结果 | | **作用域穿透** | 使用 `v-bind="$attrs"` 和 `v-on="$listeners"` 传递属性和事件 | | **Element UI 版本兼容** | Element UI 2.x 支持 Vue 2Element Plus 支持 Vue 3,注意语法差异 | --- ### **5. 对比其他方案** | **方法** | **优点** | **缺点** | |-------------------------|-----| | **动态插槽** | 灵活性高,支持复杂逻辑 | 代码量较多,需手动管理渲染逻辑 | | **formatter 属性** | 简单快捷,适合轻量格式化 | 无法渲染复杂组件(如按钮、图标) | | **render-header 函数** | 可定制表头 | 不适用于单元格内容定制 | | **JSX 语法** | 更直观的模板控制 | 需要配置 Vue JSX 支持 | --- 通过动态插槽,你可以灵活实现以下场景: - 根据数据类型渲染不同组件(如日期选择器、状态标签) - 动态生成可操作列(如编辑、删除按钮) - 条件性显示内容(如权限控制隐藏某些列的操作按钮)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值