组件注册

全局注册

可在多个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. c++ md5算法实现(转)

    原文链接:C++计算文件的MD5值 其他:c++输入文件流ifstream用法详解

  2. 小白的java学习之路 “ 类和对象”

    一.※ 万物皆对象 二.对象的两个特征: 属性:对象具有的各种特征 方法:对象执行的操作 对象:用来描述客观事物的一个实体,由一组属性和方法构成 三.封装: 对象同时具有属性和方法两项特性 对象的属性 ...

  3. react-native构建基本页面6---打包发布

    签名打包发布Release版本的apk安装包 请参考以下两篇文章: ReactNative之Android打包APK方法(趟坑过程) React Native发布APP之签名打包APK 如何发布一个a ...

  4. Scrum简介

    1. 什么是Scrum Scrum是一种轻量级的框架,适合于小型的.结合紧密的团队开发复杂的产品.Scrum是二十世纪后期一些软件工程师协同努力的脑力劳动的成果,现已成为技术领域最具魅力的方法.但Sc ...

  5. 倍加福r2000激光驱动安装及使用

    第一次完成激光的驱动安装和激光数据的采集,遇到很多问题,最后一一解决,现在记录下来,方便后面給机器人安装激光使用 激光的了解 (1)激光型号:OMD30M-R2000(30M表示30m) (2)参考手 ...

  6. LED Keychain-A Tool To Drive Specific Market Segments

    LED keychain are an excellent tool to drive specific market segments. They can focus on a small grou ...

  7. android 如何查看socket、websocket通信数据 抓包

    怎么使用可以自行百度

  8. 0216 aop和打印数据库执行日志

    需求 maven依赖 <dependency> <groupId>p6spy</groupId> <artifactId>p6spy</artif ...

  9. django 外键使用select html

    1.HTML代码: <td> <select id="depend_case" name="depend_case"> <opti ...

  10. SSM项目中的.tld文件是什么,有什么作用?怎么自定义tld文件

    原文链接:https://www.cnblogs.com/guaishoubiubiu/p/8721277.html TLD术语解释:标签库描述文件,如要在JSP页面中使用自定义JSP标签,必须首先定 ...