Vue组件模板及组件互相引用代码实例


Posted in Javascript onMarch 11, 2020

1. vue组件都是由这三部分组成

<template>
 <div>
 </div>
</template>
<script>
 export default{}
</script>
<style>
</style>

2. 组件间的引用

分3步走,假设现在有两个组件 App.vue,和 Add.vue,现在要把Add.vue组件引入到App.vue组件中

App.vue

<template>
  // 第3步
  <Add/>
</template>
<script>
   // 第1步
  import Add from './components/Add.vue'
  // 第2步
  components: {
   Add
  }
 }
</script>
<style>

</style>

3. 组件间数据的传递

假将要将App.vue组件中的数据传递到Ad.vue组件中

App.vue

<template>
  // 第3步
  // 传递数据,注意冒号
  <Add :comments="comments"/>
</template>


<script>
   // 第1步
  import Add from './components/Add.vue'
  // 第2步
  components: {
   Add
  },
  // App组件中初始化的数据
   data(){
   return {
    comments: [{
     name: 'Bob',
     content: 'Vue 还不错'
    }, {
     name: 'Cat',
     content: 'Vue so Easy'
    }, {
     name: 'BZ',
     content: 'Vue so so'
    }
    ]
   }
  }
 }
</script>


<style>

</style>

Add.vue

<script>
  export default{
   // 声明接收comments数据
   props: ['comments']

  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS request函数 用来获取url参数
May 17 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
js闭包实现按秒计数
Apr 23 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
学习javascript文件加载优化
Feb 19 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
Vue-Router的使用方法
Sep 05 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
vue中的循环对象属性和属性值用法
Sep 04 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 #Javascript
Vue事件处理原理及过程详解
Mar 11 #Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 #Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 #Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 #Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 #Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 #Javascript
You might like
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
python自动化报告的输出用例详解
2018/05/30 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
python 实现任务管理清单案例
2020/04/25 Python
函授药学自我鉴定
2014/02/07 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
教师个人自我评价
2015/03/04 职场文书
辞职离别感言
2015/08/04 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
JS 基本概念详细介绍
2021/10/16 Javascript
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js