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 ...
随机推荐
- Asp.net Controller中View 和Action方法认证Authorize 及对AuthorizeAttribute扩展
Asp.net Controller中View和Action方法认证Authorize 在建立Web 站点安全性时 1.登录后才可访问系统文件 ——限制 Forms认证 <authenticat ...
- 微信小程序app.json文件常用全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. JOSN文件不允许注释,下面为了学习加上注释,粘贴需要的片段 ...
- swapon, swapoff - 使用/关闭用于分页和交换的文件和设备
总览 (SYNOPSIS) /sbin/swapon [-h -V] /sbin/swapon -a [-v] /sbin/swapon [-v] [-p priority] specialfile ...
- Android编程之Listener侦听的N种写法及实现原理
写下这个题目时突然想起鲁迅笔下的孔乙已,茴香豆的几种写法,颇有些咬文嚼字的味道.虽然从事手机编程多年,但一直使用的是C和C++编程,由于安卓早期只支持JAVA开发,所以对于时下如火如荼的安卓系统,我一 ...
- bash命令根据历史记录补全
用zsh比较方便的一个功能是在找之前用过的命令时可以先输入一部分命令作为过滤条件, 比如,想找 docker run 开头的历史命令,只需要键入 docker run 然后按 ↑ 进行选择. 但是在用 ...
- python中关于is,=和==的区别
在Python中 '='相当于赋值 '=='相当于等号两边的值相同 is则是表示两边的id,也就是内存地址相同
- 【leetcode】bash脚本练习
[192]Word Frequency Write a bash script to calculate the frequency of each word in a text file words ...
- obj.offsetHeight与obj.style.height $(obj).height()与$(obj).css('height')
相同:都可以获取obj的高度区别:(1)obj.offsetHeight可以获取外部.内嵌和内联中定义的高,而obj.style.height只能获取内联中定义的高:(2)obj.offsetHeig ...
- Android onActivityResult()运行时刻的问题
今天在开发过程中遇到一个很是怪异的问题,就是方法onActivityResult的执行问题,问题是当我从当前的Activity跳转的时候,尚未做任何动作,onActivityResult()就已经执行 ...
- ZROI week1
\[ZROI day1\] \[Grid\] 题目描述 给定一个矩阵,小写字母,求一条路径使得从\((1,1) -> (n,m)\),字典序最小,并且每次只能向右或者向下. 题解 先考虑如果没有 ...