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方法和技巧大全
Dec 27 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
Javascript实现打鼓效果
Jan 29 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
谈一谈收音机的高放电路
2021/03/02 无线电
php Undefined index的问题
2009/06/01 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
测试php函数的方法
2013/11/13 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
js 函数性能比较方法
2020/08/24 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python3.7 sys模块的具体使用
2019/07/22 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
银行员工辞职信范文
2014/01/20 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
后备干部推荐材料
2014/12/24 职场文书
垂直极限观后感
2015/06/08 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android