1.组件定义
  

  1.定义组件并引用
  2.父组件向子组件传值  
  3.子组件向父组件传值
  # 组件间传值:vuex (https://www.cnblogs.com/xiaonq/p/9697921.html)
  

  1.1 什么是组件
  •  Html中有组件,是一段可以被复用的结构代码
  •  中有组件,是一段可以被复用的样式
  •  Js中有组件,是一段可以被复用的功能
  •  Vue中也有组件,指的就是一个模块,是一个独立的,完整的(包含html,css,js等),可以直接拿来用的  
  


  1.2 组件特性
  •   组件的实例化对象,跟vue实例化对象一样,因此,我们也可以将vue实例化对象看成组件
  •   组件间是独立的,因此数据要独立存储,方法要独立定义, 彼此间不能共享 。

 

2.父组件向子组件传值
  

  2.1 components/Child.vue 定义子组件
<template>
<div>
<h1>父组件内容</h1>
父组件显示:{{msg}} <!--3.第三步:把父组件的某一个属性传递给子组件-->
<Child
:data='msg'
></Child>
</div>
</template>
<script>
  

  // @指定的是src路径
  

  import Child from '@/components/Child' // 1.第一步:在父组件中导入子组件
  export default {
  // 2.第二步:父组件中注册子组件
    components: {
      Child
    },
    data() {
      return {
        msg: '父组件的信息'
      }
    },
    methods: {
    }
  }
</script>
 
2.3 router/index.js 中注册路由
import Father from '@/components/Father' // @修饰符指的是 src目录
export default new Router({
routes: [
{ path: '/component', name: 'Father', component: Father },
]
})
2.4 测试
  子组件中可以通过 定义 props 属性来接收父组件的数据
  

3.子组件向父组件传值
  

  3.1 components/Child.vue 子组件通过触发方法, 向父组件传值 
<template>
<div> 父组件显示:{{msg}}
<!--4.把父组件的一个方法传递给子组件-->
<Child
:data='msg'
@changeMsg='change'
></Child>
</div>
</template>
<script>
//1.导入
import Child from '@/components/Child'
export default {
//2.注册
components: {
Child,
},data() {
return {
msg: '父组件的信息'
}
},methods: {
//3.在父组件中定义一个change方法,可以在子组件中触发并传值给父组件
change(data) {
// data接收是子组件中传递的数据
// debugger
alert('调用了父组件的方法, 接收到信息:'+data)
this.msg = data // 更新父组件的内容
}
}
}
</script>
 
3.3 测试
  • 点击 "调用父组件方法" 就会调用

 

Vue 组件的基础介绍的更多相关文章

  1. Vue组件的基础用法(火柴)

    前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...

  2. Vue组件使用基础

    这篇博文用来记录 .vue 组件的使用方法. 可以把组件代码按照 template.style.script 的拆分方式,放置到对应的 .vue 文件中. 模板(template).初始数据(data ...

  3. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  4. Vue.js-08:第八章 - 组件的基础知识

    一.前言 在之前的学习中,我们对于 Vue 的一些基础语法进行了简单的了解,通过之前的代码可以清晰的看出,我们在使用 Vue 的整个过程,最终都是在对 Vue 实例进行的一系列操作. 这里就会引出一个 ...

  5. Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)

    官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...

  6. vue.js原生组件化开发(一)——组件开发基础

    前言 vue作为一个轻量级前端框架,其核心就是组件化开发.我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件.我们在引用组件之时只需将组件页面引入 ...

  7. 2.基础:Vue组件的核心概念

    一.组件基础和注册 组件概念 组件系统是 Vue 的另一个重要概念,他的核心就是封装和复用. 细节 组件的name必须是全局唯一. 二.属性.事件和插槽 组件的三大核心概念:属性.事件和插槽. 属性, ...

  8. 【Vue】组件的基础与组件间通信

    转载:https://segmentfault.com/a/1190000016409329 Vue.js 最核心的功能就是组件(Component),从组件的构建.注册到组件间通信,Vue .x 提 ...

  9. 【Vue】详解组件的基础与高级用法

    Vue.js 最核心的功能就是组件(Component),从组件的构建.注册到组件间通信,Vue 2.x 提供了更多方式,让我们更灵活地使用组件来实现不同需求. 一.构建组件 1.1 组件基础 一个组 ...

随机推荐

  1. Bootstrap告警框(alert)实现弹出效果和短暂消失后上浮消失

    最近用到bootstrap的告警框时发现只有html的说明,就自己写了一个弹出告警框和弹出短暂显示后上浮消失的告警框. 直接上JS代码了,可以copy过去直接用(使用bootstrap的UI框架的情况 ...

  2. TCP/IP的三次握手, 四次挥手

    三次握手: 1. X初始序号, SYN:   , 发送  将syn=1, X发送至client 2. 服务器发送 ACK(确认包)=1, SYN=1, 接受顺序号(acknowledge number ...

  3. PHP - 读取EXCEL内容 存入数据库

    <?php //设置请求头 header("Content-Type:text/html;charset=utf8"); header("Access-Contro ...

  4. 基于Log4Net记录日志到SQLServer(自定义字段)

    本文记录通过log4net将日志信息记录到SQLServer数据库中. 1.新建控制台应用程序 Log4NetDemo: 2.通过NuGet安装Log4Net (项目版本2.0.8): 3.项目根目录 ...

  5. pymssql 介绍

    pymssql包是Python语言用于连接SQL Server数据库的驱动程序(或者称作DB API),它是最终和数据库进行交互的工具.SQLAlchemy包就是利用pymssql包实现和SQL Se ...

  6. qqmini

    QQ玩一玩最新调试方法 https://blog.csdn.net/zyw_java/article/details/83686645 LayaBox 接入QQ玩一玩 轻游戏流程 https://bl ...

  7. 最短路径(dijkstra 与 Floyd)

    目录 1. 如何建图? 2. Floyd 3. Dijkstra 1. 如何建图? 要跑最短路,首先要有图 --鲁迅 常用的存储方法有两种,分别是邻接矩阵(用二维数组表示边)和邻接表(模拟链表表示边) ...

  8. 小程序开发-媒体组件image

    image 图片组件,支持 JPG.PNG.SVG.WEBP.GIF 等格式,2.3.0 起支持云文件ID. 所有属性如下: Tips image组件默认宽度320px.高度240px image组件 ...

  9. C#知识点:操作XML

    XML是什么就不用说了文本标记语言. 主要纪录如何对XML文件进行增删改查. Xml的操作类都存在System.xml命名空间下面. 应用型的直接上代码 using System; using Sys ...

  10. linux 增加新用户无法使用sudo命令解决办法

    昨天一不小心把自己的系统搞崩了,也没有快照,没法进行还原操作,所以只能重装系统解决了,装完系统以后一切正常,当我新增了一个用户,使用sudo命令切换到root用户时,发现怎么都切换不过去,经过百度发现 ...