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. ionic3 动态设置tabs页面底部导航栏隐藏,并显示输入框添加评论

    1.先上原始效果图:                                        2.完成后效果                                2.实现思路: ion ...

  2. dns轮训python

    环境 python3 先安装dnspython模块 httpclient模块 resolver模块 pip install dnspython pip install hhtpclient pip i ...

  3. 批量更新数据(BatchUpdate)

    批量更新数据(BatchUpdate) /// <summary> /// 批量更新数据,注意:如果有timestamp列,要移除 /// </summary> /// < ...

  4. sql INSERT语句

    当我们需要向数据库表中插入一条新记录时,就必须使用INSERT语句. INSERT语句的基本语法是: INSERT INTO <表名> (字段1, 字段2, ...) VALUES (值1 ...

  5. tarjan求强连通+缩点——cf1248E

    这题好像是DEF里最水的,, /* 建图:如果a认识b,那么从a->b连一条边,将点分成两个集合A,B,没有从A->B的边 求出强连通分量,再造一张新图,新图中任取一个的出度为0的点作为集 ...

  6. 线段树区间合并——cf1217E

    /* 定义:多重集s的元素和是sum,对于sum的第i位为x,如果s里找不到第i位也是x的元素,那么称这个多重集为bad, 现在给定一个 序列a 两种操作 1 i x:将序列第i个元素改为x 2 l ...

  7. Educational Codeforces Round 64 (Rated for Div. 2) (线段树二分)

    题目:http://codeforces.com/contest/1156/problem/E 题意:给你1-n  n个数,然后求有多少个区间[l,r] 满足    a[l]+a[r]=max([l, ...

  8. NX二次开发-Block UI C++界面关于 在Block UI中UF_initialize();和UF_terminate();的使用

    关于 在Block UI中UF_initialize();和UF_terminate();的使用 用Block UI作NX二次开发的时候,不需要在使用UFUN函数的时候加UF_initialize() ...

  9. 使用PHP curl模拟浏览器抓取网站信息

    curl是一个利用URL语法在命令行方式下工作的文件传输工具.curl是一个利用URL语法在命令行方式下工作的文件传输工具.它支持很多协议:FTP, FTPS, HTTP, HTTPS, GOPHER ...

  10. targetSdkVersion和与target属性的区别

    参考:http://blog.csdn.net/dai_zhenliang/article/details/8175781 AndroidMenifest.xml中targetSdkVersion和p ...