vue 学习四 了解组件
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 学习四 了解组件的更多相关文章
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等
本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...
- 38.VUE学习之-全局组件和局部组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Vue学习之todolist组件拆分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue学习系列(二)——组件详解
前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. ...
- vue学习笔记(七)组件
前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...
- Vue 学习笔记之 —— 组件(踩了个坑)
最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head> ...
- 【Vue】Vue学习(四)-状态管理中心Vuex的简单使用
一.vuex的简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex背后的基本思想,就是前面所说的单向数据流.图4就是Vuex实现单向数据流的示意图. Store ...
随机推荐
- Octave的安装
本文是参考吴恩达老师的深度学习视频而做的笔记 深度学习 引言 挑战:AI真正的挑战在于解决那些对人类来说很容易执行,但很难形式化描述的问题,比如识别人们所说的话/图像中的脸/分辨苹果和梨. 解决方案: ...
- 将arcEngine9.3和dev9.2.4开发的项目升级成arcObject10.2和dev15.1.3过程中遇到的问题和解决
好久没碰.net了,arcgis更是感觉都忘干净了,今天将arcEngine9.3和dev9.2.4开发的一个项目升级成arcObject10.2和dev15.1.3过程中遇到了一系问题,留个笔记,留 ...
- shell script 二 判断符号【】 shift 偏移量 if then fi
判断符号[]类似于test.但是[]有通配符及正则表达式,为了区分,利用[]来做判断时,前后都需要加空格来区分.又一个坑 [ -z "$HOME" ];echo $? 例: 1 r ...
- linux调用本地镜像
首先先让系统显示出来 iso 已经挂载 然后#mkdir /mnt/cdrom #mount /dev/cdrom /mnt/cdrom #df -H 查看是否已经挂载上 #cd /etc/ ...
- HashMap的hash分析
哈希 Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入,通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射,也就是,散列值的空间通常远小于输入的空 ...
- 查看crontab执行记录
如果出现了crontab定时任务不执行的情况,首先需要定位问题,那么就需要通过日志来确定问题所在. crontab的日志位置一般位于/var/log/cron,利用下面的语句即可查看日志. tail ...
- 服务注册与发现---spring cloud
Eureka基本架构 Register Service :服务注册中心,它是一个 Eureka Server ,提供服务注册和发现的功能. Provider Service :服务提供者,它是 Eur ...
- 外部操作获取iframe的东西
原生js document.iframe[id].contentWindow.document.querySelector(el).innerHTML jq $(window.ifram ...
- 【leetcode】667. Beautiful Arrangement II
题目如下: Given two integers n and k, you need to construct a list which contains ndifferent positive in ...
- 【Linux】windows下编写的脚本文件,放到Linux中无法识别格式
注意:我启动的时候遇到脚本错误 » sh startup.sh -m standalone tanghuang@bogon : command not found : command not foun ...