常规组件使用

定义组件

components/list/list.vue

<template>

  <ul>

    <li v-for="(item, index) in list" :key="`item_${index}`">

      {{ item.name }}

    </li>

  </ul>

</template>

<script>

export default {

  name: 'List',

  props: {

    list: {

      type: Array,

      default: () => []

    }

  }

}

</script>

components/list/index.js

import list from './list'

export default list

组件使用

views/render-page.vue

<template>

  <div>

    <list :list=list></list>

  </div>

</template>

<script>

import List from '_c/list'

export default {

  data () {

    return {

      list: [

        { name: 'name1' },

        { name: 'name2' }

      ]

    }

  },

  components: {

    List

  }

}

</script>

效果图:

定义函数式组件

components/render-dom.vue

export default {

  function: true,

  props: {

    name: String,

    renderFunc: Function

  },

  render: (h, ctx) => {

    return ctx.props.renderFunc(h, ctx.props.name)

  }

}

使用函数式组件

components/list/list.vue

<template>

  <ul>

    <li v-for="(item, index) in list" :key="`item_${index}`">

      <span v-if="!render">{{ item.name }}</span>

      <render-dom v-else :render-func="render" :name="item.name"></render-dom>

    </li>

  </ul>

</template>

<script>

import RenderDom from '_c/render-dom'

export default {

  name: 'List',

  components: {

    RenderDom

  },

  props: {

    list: {

      type: Array,

      default: () => []

    },

    render: {

      type: Function,

      default: () => {}

    }

  }

}

</script>

views/render-page.vue

<template>

  <div>

    <list :list=list :render="renderFunc"></list>

  </div>

</template>

<script>

import List from '_c/list'

export default {

  data () {

    return {

      list: [

        { name: 'name1' },

        { name: 'name2' }

      ]

    }

  },

  components: {

    List

  },

  methods: {

    renderFunc (h, name) {

      return h('i', {

        style: {

          color: 'green'

        }

      }, name)

    }

  }

}

</script>

效果图:



其余文件如函数式组件

views/render-page.vue

<template>

  <div>

    <list :list=list :render="renderFunc"></list>

  </div>

</template>

<script>

import List from '_c/list'

export default {

  data () {

    return {

      list: [

        { name: 'name1' },

        { name: 'name2' }

      ]

    }

  },

  components: {

    List

  },

  methods: {

    renderFunc (h, name) {

      return (

        <i on-click={this.handleClick} style={{ color: 'blue' }}>{name}</i>

      )

    },

    handleClick (e) {

      console.log(e)

    }

  }

}

</script>

效果图:

最新文章

1. codeforces B. Xenia and Spies 解题报告
2. hdu 1240:Asteroids!（三维BFS搜索）
3. ionic项目的一些简单操作
4. Symfony VarDumper Component
5. js使用
6. 层模型--固定定位(position:fixed)
7. Cantor表（中等）
8. codevs 1031 质数环
9. C++多线程学习之（一）——并发与多线程
10. Dynamics CRM 2013 SP1 客户表单界面上联系人subgrid上的添加现有联系人功能缺失
11. [Python] wxPython 高防Windows10记事本 (end...)
12. c/c++ 多线程 std::call_once的应用
13. Java synchronized解析
14. org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manu
15. 【BZOJ4155】[Ipsc2015]Humble Captains
16. MVEAN_day05 Nexus私服对的搭建
17. 学习笔记69—金蝶财务软件安装教程(KIS12.3，win10)
18. c++ 如何获取多线程的返回值？（std::thread ，std::async）
19. POJ 1166 暴力搜索 即 枚举
20. linux 源码包之脚本安装包的安装

热门文章

1. Python 读取word中表格数据、读取word修改并保存、替换word中词汇、读取word中每段内容，读取一段话中相同样式内容，理解Document中run
2. 【Spring】看了这篇Spring事务原理，我才知道我对Spring事务的误解有多深！
3. Petya and Graph/最大权闭合子图、最小割
4. java中extends与implements的区别
5. PythonCrashCourse 第四章习题
6. （转）mybatis一级缓存二级缓存
7. mac安装conda后，终端的用户名前面有一个(base)，最佳解决方案
8. 区块链入门到实战（21）之以太坊(Ethereum) – 分布式应用(DApp)
9. ASP.NET Core3.1使用IdentityServer4中间件系列随笔（一）：搭建认证服务器
10. 焦大：seo该研究用户需求还是搜索算法