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 ...
随机推荐
- mon磁盘满重启的问题
问题 Ceph monitors 100% full filesystem, refusing start 问题原文 I have an issue with a (not in production ...
- Microsoft Visual C++ 2005 SP1无法安装
安装时出现需要Microsoft Visual C++ 2005 Redistributble对话框, 里面说Command line option syntax error . Type Comma ...
- Jar 和 war 区别
jar包:对于学习java的人来说应该并不陌生.我们也经常使用也一些jar包.其实jar包就是java的类进行编译生成的class文件就行打包的压缩包而已.里面就是一些class文件.当我们自己使用m ...
- Spring第三天,详解Bean的生命周期,学会后让面试官无话可说!
点击下方链接回顾往期 不要再说不会Spring了!Spring第一天,学会进大厂! Spring第二天,你必须知道容器注册组件的几种方式!学废它吊打面试官! 今天讲解Spring中Bean的生命周期. ...
- VScode,code::blocksC语言编译运行出现不支持的16位应用程序解决方法
最近,莫名其妙c代码就是编译运行不了,老是提示不支持的16位应用程序 然后网上找了各种教程 只有这个成功了(害得我还升了下系统) 实现进入Windows设置 然后点更新和安全--恢复 然后点高级启动- ...
- Redis安全学习
Redis安全学习 一直在听SSRF打Redis,那Redis到底是啥,正式的认真学习一下. 1.Redis是什么 REmote DIctionary Server(Redis) 是一个由Salvat ...
- 思维导图iMindMap可以在哪些领域应用
生活工作中你常常会遇到许多力所不能及的事情,感到无奈.茫然,这时候你急需一个帮手来帮你打破困境,思维导图就是这样的救世主,至于它有哪些力所能及的事情就是下面小编要跟你讲的. 你是否经常遇到过这样的情况 ...
- 刚安装好的MathType怎么使用
对于刚接触公式编辑器的新手来说,难免会存在很多疑问:如何使用刚安装好的Word公式编辑器?安装好公式编辑器之后,我们在哪里找到这个工具呢?下面就针对大家的这些疑问,来给大家介绍下首次使用MathTyp ...
- 用FL Studio来给电子音乐混音的方法
FL Studio也算是音乐人用的比较多的编曲.混音软件了,FL Studio的一大的特色就是电子音乐的制作.尤其是对混音的操作,混音是电音制作过程中一个非常重要的环节,非常重要. 混音是什么?混音的 ...
- 用MindManager画思维导图的好处有哪些?
大家都听说过思维导图吧?有没有将这样一种图形思维工具真正运用到我们的日常生活中去呢?是否真的知道思维导图怎么用呢?今天小编就来给大家讲一讲,思维导图怎么用. 老规矩,先给大家讲一讲小编用的软件跟系统, ...