Vue - 组件 Prop
组件注册
全局注册
可在多个vue实例中使用
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<div>这是一个组件</div>'
})
new Vue({
el: '#app'
})
</script>
### 局部注册
局部组件 需要在实例配合`components`使用
```
```

组件模板
组件的模板只能有一个根元素,下面的情况是不允许的
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`选项。
### 静态传递数据
```

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

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

Vue - 组件 Prop的更多相关文章
- vue组件 Prop传递数据
组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. prop 是单向绑定的:当父组件的属性变化时, ...
- Vue组件传值prop验证方式
在Vue组件开发过程中,父组件要经常给子组件传递数据,在传递数据的过程中,子组件可以使用prop来接收父组件传递的值,同时呢,我们可以为组件的 prop 指定验证要求,例如你知道的这些类型.如果有一个 ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- Vue组件选项props
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
- 写一个vue组件
写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- Vue组件基础
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
随机推荐
- c++ md5算法实现(转)
原文链接:C++计算文件的MD5值 其他:c++输入文件流ifstream用法详解
- 小白的java学习之路 “ 类和对象”
一.※ 万物皆对象 二.对象的两个特征: 属性:对象具有的各种特征 方法:对象执行的操作 对象:用来描述客观事物的一个实体,由一组属性和方法构成 三.封装: 对象同时具有属性和方法两项特性 对象的属性 ...
- react-native构建基本页面6---打包发布
签名打包发布Release版本的apk安装包 请参考以下两篇文章: ReactNative之Android打包APK方法(趟坑过程) React Native发布APP之签名打包APK 如何发布一个a ...
- Scrum简介
1. 什么是Scrum Scrum是一种轻量级的框架,适合于小型的.结合紧密的团队开发复杂的产品.Scrum是二十世纪后期一些软件工程师协同努力的脑力劳动的成果,现已成为技术领域最具魅力的方法.但Sc ...
- 倍加福r2000激光驱动安装及使用
第一次完成激光的驱动安装和激光数据的采集,遇到很多问题,最后一一解决,现在记录下来,方便后面給机器人安装激光使用 激光的了解 (1)激光型号:OMD30M-R2000(30M表示30m) (2)参考手 ...
- 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 ...
- android 如何查看socket、websocket通信数据 抓包
怎么使用可以自行百度
- 0216 aop和打印数据库执行日志
需求 maven依赖 <dependency> <groupId>p6spy</groupId> <artifactId>p6spy</artif ...
- django 外键使用select html
1.HTML代码: <td> <select id="depend_case" name="depend_case"> <opti ...
- SSM项目中的.tld文件是什么,有什么作用?怎么自定义tld文件
原文链接:https://www.cnblogs.com/guaishoubiubiu/p/8721277.html TLD术语解释:标签库描述文件,如要在JSP页面中使用自定义JSP标签,必须首先定 ...