vue functional函数式组件
第1种写法
test.vue
<template functional>
<div class="test">
{{props.test.name}}
</div>
</template>
<script>
export default {
props: {
test: Object,
default: () => ({})
}
}
</script>
父组件 index.vue
<template>
<div>
<test :test="{name: 'vue'}"></test>
</div>
</template>
<script>
import test from './test'
export default {
components: {
test
}
</script>
第2种写法
test.js
import Vue from 'vue'
Vue.component('test', {
functional: true,
props: {
test: {
type: Object,
required: true
}
},
render: function (createElement, context) {
return createElement(
'div',
{
attrs: {
class: 'test'
}
},
[context.props.test.name]
)
}
})
父组件 index.vue
<template>
<div>
<test :test="{name: 'vue'}"></test>
</div>
</template>
<script>
import './test.js'
</script>
vue functional函数式组件的更多相关文章
- 【vue】函数式组件
在 2.5.0 及以上版本中,如果你使用了单文件组件,那么基于模板的函数式组件可以这样声明: <template functional> <div class="cell& ...
- Vue 函数式组件 functional
函数式组件 无状态 无法实例化 内部没有任何生命周期处理函数 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件,无逻辑和状态修改) 在template标签里标明functional 只 ...
- Vue函数式组件的应用
一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1. 以局部组件为例,将组件标记为 functional=ture; 因为 ...
- Vue.js 源码分析(三十) 高级应用 函数式组件 详解
函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...
- vue函数式组件详解
本篇将详细介绍vue组件化之函数式组件,会用到以下api: Vue.component().Vue.extend().$createElement.patch(). 从事vue开发的小伙伴,平时组件化 ...
- 渲染函数render和函数式组件
vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...
- Vuejs函数式组件,你值得拥有(1)
函数式组件在React社区很流行使用,那么在vue里面我们要怎么用呢 下面会涉及到的知识点: 高阶函数.状态.实例.vue组件 什么是函数式组件 我们可以把函数式组件想像成组件里的一个函数,入参是渲染 ...
- 通俗易懂了解Vue内置组件keep-alive内部原理
1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
随机推荐
- nginx&http 第二章 ngx启动多进程
Nginx服务器使用 master/worker 多进程模式. 主进程(Master process)启动后,会接收和处理外部信号: 主进程启动后通过fork() 函数产生一个或多个子进程(work ...
- wireguard使用
1.编译与安装 sudo apt-get install libmnl-dev libelf-dev linux-headers-$(uname -r) build-essential pkg-con ...
- VS2017新建MVC+ORM中的LinqDb访问数据库项目
1.前提概述 ORM对象关系映射(Object-Relational Mapping)是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说,它其实是创建了一个可在编程语言 ...
- osd磁盘空间足够无法写入数据的分析与解决
前言 这个问题的来源是ceph社区里面一个群友的环境出现在85%左右的时候,启动osd报错,然后在本地文件系统当中进行touch文件的时候也是报错,df -i查询inode也是没用多少,使用的也是in ...
- CSS属性(CSS盒子模型)
1.CSS盒子模型 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...
- JavaScript复习大纲
1. HTML.CSS和JavaScript各自在网页设计中的作用. 1.HTML生成结构. 2.CSS样式美化. 3.JavaScript的作用: (1) 操作HTML及CSS,让网页具有动态行为. ...
- ABAP CDS-介绍(ABAP CDS视图)
前言 文章翻译自Tushar Sharma的文章,转载请注明原作者和译者! 在SAP发展到SAP HANA版本之后,SAP内部的技术正在快速地变化,SAP开发业务应用程序的方式已经发生了范式转变(根本 ...
- 怎么用Camtasia给视频添加片头片尾
有许多朋友现在喜欢自己拍摄一些小视频,现在不管是在抖音还是在B站,我们看到的大部分视频都有UP主自己制作的片头或片尾.片头做的好,甚至会有人因为片头而关注UP主,能吸引更多的人来观看视频. 所以,如果 ...
- 思维导图软件iMindMap怎么用模板制作思维导图
随着思维导图的不断发展,市场上相关的软件也越来越多.像XMind.MindManager等.每一款软件都有它独特的亮点.作为众多思维导图软件中的一款,iMindMap算是比较亮眼的了.现在很多人都在用 ...
- LeetCode周赛#208
本周周赛的题面风格与以往不太一样,但不要被吓着,读懂题意跟着模拟,其实会发现并不会难到哪里去. 1599. 经营摩天轮的最大利润 #模拟 题目链接 题意 摩天轮\(4\)个座舱,每个座舱最多可容纳\( ...