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打开word文档的实现代码(c#)
Apr 16 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
全面介绍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
Terran建筑一览
2020/03/14 星际争霸
php学习 函数 课件
2008/06/15 PHP
php 动态添加记录
2009/03/10 PHP
php中的strpos使用示例
2014/02/27 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
PHP count()函数讲解
2019/02/03 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
JavaScript toFixed() 方法
2010/04/15 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
python怎么对数字进行过滤
2020/07/05 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
汽车工程专业应届生求职信
2013/10/19 职场文书
九年级英语教学反思
2014/01/31 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
公安机关起诉意见书
2015/05/20 职场文书
运动会广播稿50字
2015/08/19 职场文书