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 相关文章推荐
Javascript 圆角div的实现代码
Oct 15 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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
Terran热键控制
2020/03/14 星际争霸
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
javascript 自定义事件初探
2009/08/21 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
为python设置socket代理的方法
2015/01/14 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
Django开发中复选框用法示例
2018/03/20 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
网吧消防安全制度
2014/01/28 职场文书
预防传染病方案
2014/06/14 职场文书
代收款委托书范本
2014/10/01 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript