第1种写法

test.vue

  1. <template functional>
  2. <div class="test">
  3. {{props.test.name}}
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. test: Object,
  10. default: () => ({})
  11. }
  12. }
  13. </script>

父组件 index.vue

  1. <template>
  2. <div>
  3. <test :test="{name: 'vue'}"></test>
  4. </div>
  5. </template>
  6. <script>
  7. import test from './test'
  8. export default {
  9. components: {
  10. test
  11. }
  12. </script>

第2种写法

test.js

  1. import Vue from 'vue'
  2. Vue.component('test', {
  3. functional: true,
  4. props: {
  5. test: {
  6. type: Object,
  7. required: true
  8. }
  9. },
  10. render: function (createElement, context) {
  11. return createElement(
  12. 'div',
  13. {
  14. attrs: {
  15. class: 'test'
  16. }
  17. },
  18. [context.props.test.name]
  19. )
  20. }
  21. })

父组件 index.vue

  1. <template>
  2. <div>
  3. <test :test="{name: 'vue'}"></test>
  4. </div>
  5. </template>
  6. <script>
  7. import './test.js'
  8. </script>

vue functional函数式组件的更多相关文章

  1. 【vue】函数式组件

    在 2.5.0 及以上版本中,如果你使用了单文件组件,那么基于模板的函数式组件可以这样声明: <template functional> <div class="cell& ...

  2. Vue 函数式组件 functional

    函数式组件 无状态 无法实例化 内部没有任何生命周期处理函数 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件,无逻辑和状态修改) 在template标签里标明functional 只 ...

  3. Vue函数式组件的应用

    一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1. 以局部组件为例,将组件标记为 functional=ture; 因为 ...

  4. Vue.js 源码分析(三十) 高级应用 函数式组件 详解

    函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...

  5. vue函数式组件详解

    本篇将详细介绍vue组件化之函数式组件,会用到以下api: Vue.component().Vue.extend().$createElement.patch(). 从事vue开发的小伙伴,平时组件化 ...

  6. 渲染函数render和函数式组件

    vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...

  7. Vuejs函数式组件,你值得拥有(1)

    函数式组件在React社区很流行使用,那么在vue里面我们要怎么用呢 下面会涉及到的知识点: 高阶函数.状态.实例.vue组件 什么是函数式组件 我们可以把函数式组件想像成组件里的一个函数,入参是渲染 ...

  8. 通俗易懂了解Vue内置组件keep-alive内部原理

    1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...

  9. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

随机推荐

  1. nginx&http 第二章 ngx启动多进程

    Nginx服务器使用 master/worker 多进程模式. 主进程(Master process)启动后,会接收和处理外部信号: 主进程启动后通过fork() 函数产生一个或多个子进程(work ...

  2. wireguard使用

    1.编译与安装 sudo apt-get install libmnl-dev libelf-dev linux-headers-$(uname -r) build-essential pkg-con ...

  3. VS2017新建MVC+ORM中的LinqDb访问数据库项目

    1.前提概述 ORM对象关系映射(Object-Relational Mapping)是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说,它其实是创建了一个可在编程语言 ...

  4. osd磁盘空间足够无法写入数据的分析与解决

    前言 这个问题的来源是ceph社区里面一个群友的环境出现在85%左右的时候,启动osd报错,然后在本地文件系统当中进行touch文件的时候也是报错,df -i查询inode也是没用多少,使用的也是in ...

  5. CSS属性(CSS盒子模型)

    1.CSS盒子模型 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  6. JavaScript复习大纲

    1. HTML.CSS和JavaScript各自在网页设计中的作用. 1.HTML生成结构. 2.CSS样式美化. 3.JavaScript的作用: (1) 操作HTML及CSS,让网页具有动态行为. ...

  7. ABAP CDS-介绍(ABAP CDS视图)

    前言 文章翻译自Tushar Sharma的文章,转载请注明原作者和译者! 在SAP发展到SAP HANA版本之后,SAP内部的技术正在快速地变化,SAP开发业务应用程序的方式已经发生了范式转变(根本 ...

  8. 怎么用Camtasia给视频添加片头片尾

    有许多朋友现在喜欢自己拍摄一些小视频,现在不管是在抖音还是在B站,我们看到的大部分视频都有UP主自己制作的片头或片尾.片头做的好,甚至会有人因为片头而关注UP主,能吸引更多的人来观看视频. 所以,如果 ...

  9. 思维导图软件iMindMap怎么用模板制作思维导图

    随着思维导图的不断发展,市场上相关的软件也越来越多.像XMind.MindManager等.每一款软件都有它独特的亮点.作为众多思维导图软件中的一款,iMindMap算是比较亮眼的了.现在很多人都在用 ...

  10. LeetCode周赛#208

    本周周赛的题面风格与以往不太一样,但不要被吓着,读懂题意跟着模拟,其实会发现并不会难到哪里去. 1599. 经营摩天轮的最大利润 #模拟 题目链接 题意 摩天轮\(4\)个座舱,每个座舱最多可容纳\( ...