给属性传递数据

<!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. 补习系列(21)-SpringBoot初始化之7招式

    目录 背景 1. @PostConstruct 注解 2. InitializingBean 接口 3. @Bean initMethod方法 4. 构造器注入 5. ApplicationListe ...

  2. solr 重要的知识点

    1 solr 查询参数说明 常用 ) q - 查询字符串,必须的. ) fl - 指定返回那些字段内容,用逗号或空格分隔多个. ) start - 返回第一条记录在完整找到结果中的偏移位置, 开始,一 ...

  3. [apue] 等待子进程的那些事儿

    谈到等待子进程,首先想到的就是SIGCHLD信号与wait函数族,本文试图厘清二者的方方面面,以及组合使用时可能不小心掉进去的坑. 1. 首先谈单独使用SIGCHLD的场景.下面是一段典型的代码片段: ...

  4. Java的一些基础知识，现在回顾一下，毕竟学了那么久！

    一.基础知识:1.什么是JVM.JRE和JDK的区别:JVM(Java Virtual Machine):java虚拟机,用于保证java的跨平台的特性,java语言是跨平台,jvm不是跨平台的,jv ...

  5. DBA主宰一切请求，MySQL 查询重写

    这个功能一年左右之前就以知晓,应该是5.7的高版本中.今天难得有兴致测试.随之也就总结一下. 前言: 一般来说,我们都会让开发自己去改sql.这样需要重启应用,单节点不可避免有或多或少的停服时间.同事 ...

  6. django基础知识之Ajax:

    使用Ajax 使用视图通过上下文向模板中传递数据,需要先加载完成模板的静态页面,再执行模型代码,生成最张的html,返回给浏览器,这个过程将页面与数据集成到了一起,扩展性差 改进方案:通过ajax的方 ...

  7. django基础知识之POST属性:

    POST属性 QueryDict类型的对象 包含post请求方式的所有参数 与form表单中的控件对应 问:表单中哪些控件会被提交? 答:控件要有name属性,则name属性的值为键,value属性的 ...

  8. scrapy实战8关于数据异步写入mysql：

    环境:python3 爬取网址:腾讯社招(http://hr.tencent.com/position.php?keywords=&tid=0&start=0#a)总共2202条数据 ...

  9. 利用Jmeter模拟Github登录

    最近学习了Jmeter的简单操作,很想找点东西来实战一下,因为我之前写过一篇通过Python模拟登录的文章,于是便想尝试下学习通过Jmeter来模拟登录. 本人环境:Jmeter5.1.1 关于Git ...

  10. Spring boot ，dubbo整合异常

    Caused by: java.lang.IllegalArgumentException: java.lang.ClassCastException: com.guooo.boot.acc.serv ...