vue教程二 vue组件(3)
给属性传递数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title></title>
<style type="text/css"> </style>
</head>
<body>
<div id="app">
<!-- 外部传入属性值 -->
<my-button color="red"></my-button>
</div>
<script>
//全局定义组件
Vue.component('my-button',{
template:'<button v-bind:style="style">this is my button</button>',
props:['color'], //设置组件属性color
computed: {
style(){
return {backgroundColor:this.color}; //内部使用属性color
}
}
}); var app = new Vue({
el: '#app',
data: { } });
</script>
</body>
</html>
还可以定义组件属性的类型，默认值，是否必须，添加属性验证函数
您已经看到，当数据对象、方法或计算属性的值发生更改时，也会更新模板，这对props也适用。当设置组件上的props将其绑定到一个值时，可以使用vbind，然后当该值发生更改时，组件中使用它的任何地方也会更新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title></title>
<style type="text/css"> </style>
</head>
<body>
<div id="app"> <!-- 外部传入属性值 -->
<my-button my-alt="1111" color="red" text="1212" v-bind:price="price"></my-button> <p>{{price}}</p>
</div>
<script>
//全局定义组件
Vue.component('my-button',{
template:'<div v-bind:alt="myAlt"><button v-bind:style="style">{{text}} </button> <span>{{price}}</span></div>',
props:{
color:{
type:String,
default :"blue",
required:false,
},
text:[String,Number] ,//如果一个属性是多种类型中的一种，那么您可以传入数组中的所有有效类型
price:{
type:Number,
default:0.00,
required:true,
validator(val){ //验证属性price必须大于等于0
return val>=0
}
},
myAlt:String, //注意vue会帮我们自动转换驼峰命名为"-"方式,在元素上使用的属性应该为:my-alt
},
computed: {
style(){
return {backgroundColor:this.color}; //内部使用属性color
}
},
}); var app = new Vue({
el: '#app',
data: {
price:0,
},
created() {
let that=this;
setInterval(function(){
that.price++;
},1000);
} });
</script>
</body>
</html>
数据通过一个props从父对象传递给子对象，当该数据在父对象中被更新时，传递给子对象的道具也被更新。但是，您不能从子组件修改该props。这就是所谓的单向绑定，它可以防止组件可能无意中改变父组件的状态
所有 props 都在子组件和父组件之间形成一个单向往下流动的数据绑定：当父组件中的属性更新时，数据就会向下流动到子组件，但是反过来，子组件属性更新时，父组件并不会感知到子组件的数据变化。这种机制可以防止子组件意外地修改了父组件的状态，造成应用程序的数据流动变得难于理解。
此外，每次父组件更新时，子组件中所有的 props 都会更新为最新值。也就是说，你不应该试图在子组件内部修改 prop。如果你这么做，Vue 就会在控制台给出警告。
【前端全套视频教程】https://weihaibao.taobao.com/m/QWYr3w57z 点击链接，跟多教程请浏览本店（价格便宜公道，买不了吃亏买不了上当）
vue教程二 vue组件(3)的更多相关文章
- vue教程二 vue组件(2)
每个组件都可以有自己的data.methods.computed和您之前看到的所有内容—就像Vue实例本身一样. 您可能已经注意到了组件和Vue实例之间的一个细微差别:Vue实例上的数据属性是一个对象 ...
- vue教程二 vue组件(1)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script ...
- vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用
vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...
- vue教程2-02 vue防止花括号{{}}闪烁，v-text和v-html、v-cloak
vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html.v-cloak 一.v-text和v-html <span>{{msg}}</span> --& ...
- vue教程3-02 vue动画
vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...
- vue教程2-04 vue实例简单方法
vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
随机推荐
- spring boot + druid + mybatis + atomikos 多数据源配置 并支持分布式事务
文章目录 一.综述 1.1 项目说明 1.2 项目结构 二.配置多数据源并支持分布式事务 2.1 导入基本依赖 2.2 在yml中配置多数据源信息 2.3 进行多数据源的配置 三.整合结果测试 3.1 ...
- centos系统supervisor配置
supervisor用来管理非daemon程序!将自动转换为daemon程序 安装: yum install supervisor 配置: 默认配置文件路径: /etc/supervisord.con ...
- 解读TIME_WAIT--你在网上看到的大多数帖子可能都是错误的
由于TCP协议整个机制也非常复杂我只能尽可能的在某一条线上来说,不可能面面俱到,如果有疏漏或者对于内容有异议可以留言.谢谢大家. 查看服务器上各个状态的统计数量: netstat -ant | awk ...
- 源码阅读 - java.util.concurrent （三）ConcurrentHashMap
在java.util.concurrent包中提供了一个线程安全版本的Map类型数据结构:ConcurrentMap.本篇文章主要关注ConcurrentMap接口以及它的Hash版本的实现Concu ...
- 浅入深出Vue：第一个页面
今天正式开始入门篇,也就是实战了~ 首先我们是要做一个博客网站,UI 框架采用江湖传闻中的 ElementUI,今天我们就来利用它确定我们博客网站的基本布局吧. 准备工作 新建一个vue项目(可以参考 ...
- Python入门基础(3 下)
接着讲列表里面的一些操作吧 列表元素访问与计数 1.统计指定元素在列表中出现的次数使用count(),这就不必细说了,直接看代码,需要记住的是括号里面放的是元素 list = [1,5,5,5,5,8 ...
- ETL-kettle 核心执行逻辑
一.大数据下的ETL工具是否还使用Kettle kettle 作为通用的ETL工具,非常成熟,应用也很广泛,这里主要讲一下 目前我们如何使用kettle的? 在进行大数据处理时,ETL也是大数据处理的 ...
- 对scanner.close方法的误解以及无法补救的错误
scanner错误关闭导致的异常 public class test2 { public static void main(String[] args) { Scanner scanner1 = ne ...
- 如何使用百度EasyDL进行情感分析
使用百度EasyDL定制化训练和服务平台有一段时间了,越来越能体会到EasyDL的易用性.在此之前我也接触过不少的深度学习平台,如类脑平台.Google的GCP深度学习平台.AWS深度学习平台,但我觉 ...
- 个人永久性免费-Excel催化剂功能第39波-DotNet版的正则处理函数
在很久之前已经开发过的一些自定义函数,未能有详细的讲解,接下来几波中着重对之前开发过的自定义函数进行详细讲解及示例说明,希望能够帮助到普通用户们能顺利使用,此篇介绍为正则表达式函数. 文章出处说明 原 ...