组件注册

全局注册

可在多个vue实例中使用

<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<div>这是一个组件</div>'
})
new Vue({
el: '#app'
})
</script>

### 局部注册
局部组件 需要在实例配合`components`使用
```

```
![](https://images2018.cnblogs.com/blog/1321525/201806/1321525-20180607224922938-1073194676.png)

组件模板

组件的模板只能有一个根元素,下面的情况是不允许的

	template: '<p>{{messages}}</p><div>ss</div>'

组件的复用

可以将组件进行任意次数的复用。

当点击按钮时,每个组件都会各自独立维护它的 count。因为你每用一次组件,就会有一个它的新实例被创建。

<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
data: function(){
return{
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{count}} times.</button>'
})
new Vue({
el: '#app'
})
</script>

### data 必须是一个函数
一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
```

data: function () {

return {

count: 0

}

}

<br>
## 使用prop传递数据
其实通过不断的学习,我们会发现,其实组件实例的作用域是孤立的。这意味着不能(同时也是不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的`props`选项。
### 静态传递数据

```
![](https://images2018.cnblogs.com/blog/1321525/201806/1321525-20180608073135118-628855038.png)

### 动态传递数据
` prop `可以通过 `v-bind` 动态赋值
```

```
![](https://images2018.cnblogs.com/blog/1321525/201806/1321525-20180608074019380-1788600169.gif)

### Prop验证
组件可以为 `props`指定验证要求。如果未指定验证要求,Vue 会发出警告。当组件给其他人使用时这很有用。
`prop `是一个对象而不是字符串数组时,它包含验证要求
```

```
![](https://images2018.cnblogs.com/blog/1321525/201806/1321525-20180608184102910-347475394.png)

Vue - 组件 Prop的更多相关文章

  1. vue组件 Prop传递数据

    组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. prop 是单向绑定的:当父组件的属性变化时, ...

  2. Vue组件传值prop验证方式

    在Vue组件开发过程中,父组件要经常给子组件传递数据,在传递数据的过程中,子组件可以使用prop来接收父组件传递的值,同时呢,我们可以为组件的 prop 指定验证要求,例如你知道的这些类型.如果有一个 ...

  3. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  4. JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  5. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  6. Vue组件选项props

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...

  7. 写一个vue组件

    写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...

  8. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  9. Vue组件基础

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

随机推荐

  1. springboot~工作流activiti的搭建

    概念 工作流产品使用activiti的算是比较多了,自带了一套UI界面,可以直接使用,用来设计流程,下面简单总结一下它的步骤: 1 设计模型 2 发布为流程,一个模型可以发布多个版本的流程 3 建立一 ...

  2. Python之xlrd模块读取xls文件与报错解决

    安装 pip3 install xlrd 用法 Sheet编号从0开始 rows,colnum编号均从0开始 合并的单元格仅返回第一格内容 Sheets只能被调用一次,可获取所有sheet取idx 无 ...

  3. [转] c# 中使用opencv进行视频捕获

    简介 这个项目是关于如何从网络摄像头或者视频文件(*.AVI)中捕获视频的,这个项目是用C#和OPENCV编写的. 这将有助于那些喜欢C#和OpenCV环境的人.这个程序完全基于Visual Stud ...

  4. pycharm+anaconda在Mac上的配置方法 2019.11.29

    内心os: 听人说,写blog是加分项,那他就不是浪费时间的事儿了呗 毕竟自己菜还是留下来东西来自己欣赏吧 Mac小电脑上进行python数据开发环境的配置 首先下载Anaconda,一个超好用的数据 ...

  5. pytest参数化 parametrize

    pytest.mark.parametrize装饰器可以实现测试用例参数化 parametrizing 1.这里是一个实现检查一定的输入和期望输出测试功能的典型例子 # content of test ...

  6. Spring IoC详解

    Spring IoC详解 1. 控制反转 控制反转是一种通过描述(XML或者注解)并通过第三方去产生或获取特定对象的方式.在Spring中实现控制反转的是IoC容器,其实现方法是依赖注入(Depend ...

  7. 酷卓 一键ROOT教程

    待编辑,还没写完 哈哈 酷卓 一键ROOT教程 首先简单介绍下酷卓. 酷卓由我个人开发,主要为了用户获取ROOT简单化,傻瓜化.酷卓获取方式:加QQ群 766969447 群文件下载就行 1. 手动选 ...

  8. Python 之路Day13

    匿名函数 一行函数 lambda == def -- 关键字 lambda x:x x 是普通函数的形参(位置,关键字……)可以不接收参数,可以不写 :x 是普通函数的函数值(只能返回一个数据类型), ...

  9. Java代码手段防止非法请求——防盗链

    Java代码手段防止非法请求,思路如下:        1. 获取到当前请求的域名,如www.a.com        2. 获取到请求资源的上一个地址        3. 判断上一个地址是否为空,如 ...

  10. hive删除表时直接卡死

    原因:因为以前安装的mysql,字符集都改为了utf-8. 解决方案:需要把字符集都改为latin1 首先进入mysql查看字符集 show variables like 'char%' 找到mysq ...