Vue.js组件间的循环引用方法示例


Posted in Javascript onDecember 27, 2017

什么是组件:

众所周知组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。下面话不多说了,来一起看看本文的正文内容。

引言

写了大大小小不少基于vue的项目,但是基本没用到过组件循环引用的知识。

为了查缺补漏,照着官方文档撸一个DEMO:组件之间的循环引用

本人的运行版本为 vue-cli@2.8.1,启用项目后,将以下 js 文件和 vue 文件放置在相应的目录中运行。

main.js

import Vue from 'vue'
import App from './App'
new Vue({
 el: '#app',
 template: '<App/>',
 components: { App }
})

main.js 导入 App 组件,并在 components 中注册 App 组件。

App.vue

<template>
 <div id="app">
 <li v-for="folder in folders">
 <tree-folder v-bind:folder="folder"></tree-folder>
 </li>
 </div>
</template>
<script>
 import TreeFolder from './components/tree-folder'
 export default {
 data: function () {
 return {
 folders: [
  {
  name: 'folder1',
  children: [{
  name: 'folder1 - folder1',
  children: [{
  name: 'folder1 - folder1 - folder1'
  }]
  }, {
  name: 'folder1 - folder2',
  children: [{
  name: 'folder1 - folder2 - folder1'
  }, {
  name: 'folder1 - folder2 - folder2'
  }]
  }]
  },
  {
  name: 'folder 2',
  children: [{
  name: 'folder2 - folder1',
  children: [{
  name: 'folder2 - folder1 - folder1'
  }]
  }, {
  name: 'folder2 - folder2',
  children: [{
  name: 'folder2-content1'
  }]
  }]
  },
  {
  name: 'folder 3',
  children: [{
  name: 'folder3 - folder1',
  children: [{
  name: 'folder3 - folder1 - folder1'
  }]
  }, {
  name: 'folder3 - folder2',
  children: [{
  name: 'folder3-content1'
  }]
  }]
  }
 ]
 }
 },
 components: {
 TreeFolder
 }
 }
</script>

App 组件导入 TreeFolder 组件,并在 components 中注册 TreeFolder 组件。

components/tree-folder.vue

<template>
 <p>
 <span>{{ folder.name }}</span>
 <tree-folder-contents :children="folder.children"></tree-folder-contents>
 </p>
</template>
<script>
 // 官方文档:「在我们的例子中,将 tree-folder 组件做为切入起点。我们知道制造矛盾的是 tree-folder-contents 子组件,所以我们在 tree-folder 组件的生命周期钩子函数 beforeCreate 中去注册 tree-folder-contents 组件」
 export default {
 props: ['folder'],
 data: function () {
  return {}
 },
 beforeCreate: function () {
 // 官方文档给出的是require
 // this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue')
 // 在基于vue-cli@2.8.1按照上面的写法还是会报错
 // Failed to mount component: template or render function not defined.
 // 所以我们应该改为基于es6的写法异步加载一个组件如下
  this.$options.components.TreeFolderContents = () => import('./tree-folder-contents.vue')
 }
 }
</script>

TreeFolder 组件导入 TreeFolderContents 组件,并在 components 中注册 TreeFolderContents 组件。

components/tree-folder-contents.vue

<template>
 <ul>
 <li v-for="child in children">
  <tree-folder v-if="child.children" :folder="child"></tree-folder>
  <span v-else>{{ child.name }}</span>
 </li>
 </ul>
</template>
<script>
 import TreeFolder from './tree-folder'
 export default {
 props: ['children'],
 components: {
  TreeFolder
 }
 }
</script>

TreeFolderContents 组件又导入 TreeFolder 组件,并在 components 中注册 TreeFolder 组件,产生了循环引用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
jQuery异步提交表单实例
May 30 jQuery
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
js实现车辆管理系统
Aug 26 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 #Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
浅谈vue-router 路由传参的方法
Dec 27 #Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 #Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 #Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 #Javascript
You might like
B2K与车机的中波PK
2021/03/02 无线电
php curl 上传文件代码实例
2015/04/27 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
js获取视频时长代码
2014/04/10 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
开放系统互连参考模型
2016/06/29 面试题
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
英文演讲稿
2014/05/15 职场文书
2015年招聘工作总结
2014/12/12 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis