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. 性能提升40%: 腾讯 TKE 用 eBPF 绕过 conntrack 优化 K8s Service

    Kubernetes Service 用于实现集群中业务之间的互相调用和负载均衡,目前社区的实现主要有userspace,iptables和IPVS三种模式.IPVS模式的性能最好,但依然有优化的空间 ...

  2. 华为荣耀5X(畅玩版 全网通)USB调试模式如何开启教程(开发者模式 开发者选项打开)

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985, 前一段时间,公司买了一款华为荣耀畅玩版5X全网通,进行测试.发现 拿usb数据线连接PC电脑,无法进 ...

  3. Cython编译独立的可执行文件

    cython --embed -o hello.c hello.pygcc hello.c -o hello -I /Library/Frameworks/Python.framework/Versi ...

  4. CentOS yum 安装时错误 Errno 14 Couldn't resolve host 解决办法

    在虚拟机上安装完CentOS6.5之后,首次使用时yum命令安装软件时,出现一堆的” Errno 14 Couldn't resolve host”这个问题. 上网上查了半天,很多都说在/etc/re ...

  5. 转载过来的参考内容---常规36个WEB渗透测试漏洞描述及修复方法----很详细

        常规WEB渗透测试漏洞描述及修复 --转自:http://www.51testing.com/html/92/n-3723692.html (1). Apache样例文件泄漏 漏洞描述 apa ...

  6. 在一张id连续的表中找出缺失的id

    有这样一张表: create table tb_lostid( id number(6,0) primary key not null, name nvarchar2(20) not null ) 可 ...

  7. [LeetCode]621. 任务调度器(贪心)

    题目 给定一个用字符数组表示的 CPU 需要执行的任务列表.其中包含使用大写的 A - Z 字母表示的26 种不同种类的任务.任务可以以任意顺序执行,并且每个任务都可以在 1 个单位时间内执行完.CP ...

  8. Gradle系列之Android Gradle插件

    原文发于微信公众号 jzman-blog,欢迎关注交流. 通过前面几篇文章学习了 Gradle 基础知识以及 Gradle 插件相关的知识,关于 Gradle 及其插件相关知识请先阅读下面几篇文章: ...

  9. Java基础之LinkedHashMap原理分析

    知识准备HashMap 我们平时用LinkedHashMap的时候,都会写下面这段 LinkedHashMap<String, Object> map = new LinkedHashMa ...

  10. vue简单案例_动态添加删除用户数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...