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

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUE 自定义组件模板的方法详解

    VUE 自定义组件模板的方法详解

    本文实例讲述了VUE 自定义组件模板的方法.分享给大家供大家参考,具体如下: 先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,页面展示效果做动态可配,需求更新时,重新配置一份模板录入到数据库,然后根据用户选择的模板进行展示. 关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the runtime-only b

  • vue组件定义，全局、局部组件，配合模板及动态组件功能示例

    vue组件定义，全局、局部组件，配合模板及动态组件功能示例

    本文实例讲述了vue组件定义,全局.局部组件,配合模板及动态组件功能.分享给大家供大家参考,具体如下: 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3>我是标题3</h3>' }); Vue.component('aaa',Aaa); *组件里面放数据: data必须是函数的形式,函数必须返回一个对象(json) 2. 局部组件 放到某个组件内部 var vm=new Vue({ el:'#box', data

  • 在vue-cli的组件模板里使用font-awesome的两种方法

    方法一: npm install font-awesome 在main.js里添加import 'font-awesome/css/font-awesome.css' 方法二: 在官网下载代码到本地,现在应该是font-awesome-4.7,把整个文件夹放到static文件夹中,然后在index.html中加上<link rel="stylesheet" href="/static/font-awesome-4.7/css/font-awesome.min.css&q

  • vue slot 在子组件中显示父组件传递的模板

    父组件使用没有指定slot属性,默认为default 在slot中可以使用默认值,如果父组件没有传递对应的slot,则会显示默认值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body&

  • 详解vue为什么要求组件模板只能有一个根元素

    我是在知乎上看到的这个问题,转念一想,用了大半年的vue,好像真的没有了解过: '为什么只能有且只有一个根元素' 于是我花了二十多分钟去找了一下答案......竟然没有找到答案.... 好的现在我来说说我的理解,如果有不对的地方欢迎指出. 我觉得这个问题需要从两个方面来说起: 1.new Vue({el:'#app'}) 2.单文件组件中,template下的元素div 一.当我们实例化Vue的时候,填写一个el选项,来指定我们的SPA入口: let vm = new Vue({ el:'#ap

  • Vue.js的动态组件模板的实现

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么. 评论现在不再仅仅是简单的文本字段.您希望能够发布链接,上传图像,集成视频等等.必须在此注释中呈现所有这些完全不同的元素.如果你试图在一个组件内执行此操作,它很快就会变得非常混乱. 处理方式 我们该如何处理这个问题?可能大多数人会先检查所有情况,然后在此之后加载特定组件.像这样的东西: <templat

  • vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

    vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

    介绍 做前端的大家都知道通过 vue 开发的项目每次创建新组建的时候,都要新建一个目录,然后新增 .vue 文件,在这个文件中再写入 template . script . style 这些内容,虽然在写入的时候大家都有自己的自动补全共计,不过这些都是模板性的,每次都要这样重复操作,很麻烦有没有. 本文就是通过node来帮助我们,自动去执行这些重复操作,而我们只需要告诉控制台我们需要创建的组件名字就可以了. 本文自动创建的组件包含两个文件:入口文件 index.js .vue文件 main.vu

  • vue的三种图片引入方式代码实例

    这篇文章主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先给图片地址绑定变量: <template> <img :src="imgUrl"> </template> 在script中设置变量: //方法1:直接将图片引入为模块 require imgUrl from "../assets/test.png" //方法2:把imgUrl放

  • Java8方法引用和构造引用代码实例

    这篇文章主要介绍了java8方法引用和构造引用代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一方法引用概述 方法引用是特定Lamda表达式的一种简写,其思路就是能替换Lamda表达式就直接调用函数使用方法名. 其语法格式:类名 :: 方法名. 二3种方法引用 1 指向静态方法的引用 语法格式: 静态类名(ClassName)::方法名(MethodName) 示例: // 1 Lamda静态方法 @Test public void L

  • Javascript地址引用代码实例解析

    javascript地址引用 代码如下 var a = new Object(); a.price = 173; var b = a; b.price = 170; //b更改了属性值,a的属性值一起会被改变 alert(a.price); //输出170 var a =3 var b = a; b=4; alert(a); //输出170 可以看出object 是引用 学过c++的人知道 是地址 所以跟PHP不一样 PHP前面是要加&代表地址 ps补充下 复制对象 不修改原来对象属性的方法 v

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

    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

  • vue简单练习 桌面时钟的实现代码实例

    vue简单练习 桌面时钟的实现代码实例

    用vue实现一个简单的网页桌面时钟,主要包括时钟显示.计时.暂停.重置等几个功能. 效果图如下,页面刚进来的时候是一个时钟,时钟上显示的时.分.秒为当前实际时间,点击计时器按钮后,页面变成一个计时器,并且计时器按钮被暂停与重置两个按钮替代,分别对计时器进行暂停和重置,若点击时钟按钮会切换回时钟界面. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&g

  • vue.js高德地图实现热点图代码实例

    1.在index.html引入高德地图JSAPI <script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script> 2.地图dom <div class="map-container"> <div id="container" style="width:100%;height:500px"></di

  • Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta

  • 基于 Vue 的树形选择组件的示例代码

    基于 Vue 的树形选择组件的示例代码

    本文介绍了基于 Vue 的树形选择组件.分享给大家,具体如下: 系统要求:Vue 2 基本特性 完美的多级联动效果 支持无限多的分级 有 全选.半选.不选 三种状态  截图展示 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="https://v1-c

  • vue 父组件给子组件传值子组件给父组件传值的实例代码

    父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{title}}</h2> //title必须是父组件传递的 </template> <script> export default (){ props:["title"] //可以是数组,也可以是对象 //如何对title进行校验 //props:{ // t

  • vue递归组件实战之简单树形控件实例代码

    1.递归组件-简单树形控件预览及问题 在编写树形组件时遇到的问题: 组件如何才能递归调用? 递归组件点击事件如何传递? 2.树形控件基本结构及样式 <template> <ul class="vue-tree"> <li class="tree-item"> <div class="tree-content"><!--节点内容--> <div class="expand-

随机推荐