给属性传递数据

<!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)的更多相关文章

  1. vue教程二 vue组件(2)

    每个组件都可以有自己的data.methods.computed和您之前看到的所有内容—就像Vue实例本身一样. 您可能已经注意到了组件和Vue实例之间的一个细微差别:Vue实例上的数据属性是一个对象 ...

  2. vue教程二 vue组件(1)

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

  3. vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  4. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  5. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

  6. 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>  --& ...

  7. vue教程3-02 vue动画

    vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...

  8. vue教程2-04 vue实例简单方法

    vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...

  9. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

随机推荐

  1. Powerdesigner 从Oracle到mssql2008

    database->update model for database> ->系统数据源->选择用户,选择表,确定... 1.database->change Curre ...

  2. 【Flink】Flink 底层RPC框架分析

    1. 前言 对于Flink中各个组件(JobMaster.TaskManager.Dispatcher等),其底层RPC框架基于Akka实现,本文着重分析Flink中的Rpc框架实现机制及梳理其通信流 ...

  3. spring cloud 系列第7篇 —— sleuth+zipkin 服务链路追踪 (F版本)

    源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.简介 在微服务架构中,几乎每一个前端的请求都会经过多个服务单元协调来提 ...

  4. kubernetes实战篇之Dashboard的访问权限限制

    系列目录 前面我们的示例中,我们创建的ServiceAccount是与cluster-admin 绑定的,这个用户默认有最高的权限,实际生产环境中,往往需要对不同运维人员赋预不同的权限.而根据实际情况 ...

  5. （H5）canvas实现裁剪图片和马赛克功能，以及又拍云上传图片

    1.核心功能 此组件功能包含: 图片裁剪(裁剪框拖动,裁剪框改变大小): 图片马赛克(绘制马赛克,清除马赛克): 图片预览.图片还原(返回原图.返回处理图): 图片上传(获取签名.上传图片). 2.核 ...

  6. python工具函数

    1. translate translate要比replace要高效,translate支持替换多 使用translate之前必须要创建一个转换表.要创建转换表,可对字符串类型str调用方法maket ...

  7. Flutter学习笔记（3）--Dart变量与基本数据类型

    一.变量 在Dart里面,变量的声明使用var.Object或Dynamic关键字,如下所示: var name = ‘张三’: 在Dart语言里一切皆为对象,所以如果没有将变量初始化,那么它的默认值 ...

  8. iOS组件化开发一远程私有库的升级（三）

    一.远程私有库的升级 1. 把新增的类 拖入到 classes 文件夹中 : 2. 修改 pod.spec 文件的 s.verson = ‘0.2.0': 二.更新远程仓库 1.cd 到本地仓库的位置 ...

  9. [golang]golang time.After内存泄露问题分析

    无意中看到一篇文章说,当在for循环里使用select + time.After的组合时会产生内存泄露,于是进行了复现和验证,以此记录 内存泄露复现 问题复现测试代码如下所示: package mai ...

  10. 6.秋招复习简单整理之请你谈谈JDBC的反射，以及它的作用？

    通过反射com.mysql.jdbc.Driver类,实例化该类时会调用该类的静态代码块,该代码块会去java的DriverManager类中注册自己,DriverManager管理所有已注册的驱动类 ...