1组件的注册

全局注册

import Vue from 'vue';
import com from './component1';
Vue.component("com_name",com)//第一个参数是你为注册的组件定义一个id,第二个是你要注册的组件

局部注册

//在组件内
import com from "../components/a_component";
export default {
name: "home",
components: {
com_name: com //com_name 是你为注册的组件定义一的id,它会成为在<template>中使用时的标签名,com要注册的组件
}
}
<template>
<div id="home">
<com_name></com_name>
</div>
</template>

2组件通讯

父组件传值给子组件 props

第一种

在子组件中使用props:[],将其定义成一个数组的方式

//父组件
<template>
<div id="home">
<input type="type" id="one" v-model.trim="picked" />
<com test='12345'></com> //在组件标签上添加一个属性 这里可以添加任意个 和任意种类型包括对象、数组甚至方法,如果是添加复杂类型 请使用:test的vue动态绑定语法,
//像这种html语法支持number和string,复杂的如对象方法会识别不了
</div>
</template>
//子组件
<template>
<div class="a_component-wrap">
<h1>
{{test}} //使用
</h1>
</div>
</template> <script>
export default {
name: "AComponent",
props:["test"] //只有在这里声明过的props才能像data里面的属性一样正常使用,添加多个['test','test1','test2',...],
//假设父组件在子组件上定义了test1 test2两个props,而子组件声明了test1,那么子组件使用test2的时候会报出 not defined
};
</script>

第二种

在子组件中使用props:{}

export default {
name: "AComponent",
props:{
test1:{
type:Boolean, //提供一个类型检查 如果这里定义的是boolean,那么父组件传递过来的数据就只能是boolean,否则报错
default:false //提供一个默认值,当父组件没有将test1传递过来的时候,子组件上test1的值会是false,它和type可以只有type 或只有default或都有
}
}
};

值得一提的是,为什么组件里的data会是一个function,这是为了保证在多个地方使用这个组件的时候,组件的实例是独立的,比如说,你有一个计时器组件,你在三个地方使用了它,第一个时间显示为20 第二个为10 第三个为0,这三个实例都是独立的,但如果组件中的data是一个对象,那么这三个实例就会都是一样的状态

vue 学习四 了解组件的更多相关文章

  1. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  2. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  3. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  4. 38.VUE学习之-全局组件和局部组件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. Vue学习之todolist组件拆分

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

  6. Vue学习系列(二)——组件详解

    前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. ...

  7. vue学习笔记(七)组件

    前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...

  8. Vue 学习笔记之 —— 组件(踩了个坑)

    最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head> ...

  9. 【Vue】Vue学习(四)-状态管理中心Vuex的简单使用

    一.vuex的简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex背后的基本思想,就是前面所说的单向数据流.图4就是Vuex实现单向数据流的示意图.    Store     ...

随机推荐

  1. Octave的安装

    本文是参考吴恩达老师的深度学习视频而做的笔记 深度学习 引言 挑战:AI真正的挑战在于解决那些对人类来说很容易执行,但很难形式化描述的问题,比如识别人们所说的话/图像中的脸/分辨苹果和梨. 解决方案: ...

  2. 将arcEngine9.3和dev9.2.4开发的项目升级成arcObject10.2和dev15.1.3过程中遇到的问题和解决

    好久没碰.net了,arcgis更是感觉都忘干净了,今天将arcEngine9.3和dev9.2.4开发的一个项目升级成arcObject10.2和dev15.1.3过程中遇到了一系问题,留个笔记,留 ...

  3. shell script 二 判断符号【】 shift 偏移量 if then fi

    判断符号[]类似于test.但是[]有通配符及正则表达式,为了区分,利用[]来做判断时,前后都需要加空格来区分.又一个坑 [ -z "$HOME" ];echo $? 例: 1 r ...

  4. linux调用本地镜像

    首先先让系统显示出来 iso 已经挂载 然后#mkdir  /mnt/cdrom #mount  /dev/cdrom /mnt/cdrom #df  -H  查看是否已经挂载上 #cd  /etc/ ...

  5. HashMap的hash分析

    哈希 Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入,通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射,也就是,散列值的空间通常远小于输入的空 ...

  6. 查看crontab执行记录

    如果出现了crontab定时任务不执行的情况,首先需要定位问题,那么就需要通过日志来确定问题所在. crontab的日志位置一般位于/var/log/cron,利用下面的语句即可查看日志. tail ...

  7. 服务注册与发现---spring cloud

    Eureka基本架构 Register Service :服务注册中心,它是一个 Eureka Server ,提供服务注册和发现的功能. Provider Service :服务提供者,它是 Eur ...

  8. 外部操作获取iframe的东西

    原生js  document.iframe[id].contentWindow.document.querySelector(el).innerHTML    jq    $(window.ifram ...

  9. 【leetcode】667. Beautiful Arrangement II

    题目如下: Given two integers n and k, you need to construct a list which contains ndifferent positive in ...

  10. 【Linux】windows下编写的脚本文件,放到Linux中无法识别格式

    注意:我启动的时候遇到脚本错误 » sh startup.sh -m standalone tanghuang@bogon : command not found : command not foun ...