给属性传递数据

<!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. spring 5.x 系列第10篇 —— 整合mongodb (代码配置方式)

    源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.说明 1.1 项目结构说明 配置文件位于com.heibaiying. ...

  2. pybind11在Windows下的使用

      Pybind11算是目前最方便的Python调用C++的工具了, 介绍一下在vs2019上写Python的扩展的HelloWorld   1. 去下载pybind11 https://github ...

  3. SSM(二)MyBatis多表联查

    这篇文章写了以下几个简单的例子,用来说明MyBatis多标联查基本语法 1.sql片段的用法 2.一对多查询 3.多条sql的一对多查询 4.多对一查询 5.多条sql一对多查询 6.多对多查询 这里 ...

  4. RT-thread线程创建：动态线程与静态线程

    本文介绍了如何创建一个动态线程和一个静态线程 RT-thread版本:RT-thread system 3.1.0 开发环境:MDK5 为了编程方便,创建了sample1.c文件,然后添加到工程中 话 ...

  5. Django中间件加载原理

    假设我们有如下中间件: setting.py文件 MIDDLEWARE = [ 'django.middleware.A', 'django.middleware.B', 'django.middle ...

  6. vboxnetctl: no such file or directory

     sudo /Library/StartupItems/VirtualBox/VirtualBox restart sudo /Library/StartupItems/VirtualBox/Vir ...

  7. 阿里系手淘weex学习第一天

    官网原文:https://weex.apache.org/zh/tools/extension.html#功能 功能 创建Weex项目. 支持在VSCode对Weex的语法支持. 检查iOS和Andr ...

  8. 02(e)多元无约束优化问题- 梯度的两种求解方法以及有约束转化为无约束问题

    2.1 求解梯度的两种方法 以$f(x,y)={{x}^{2}}+{{y}^{3}}$为例,很容易得到: $\nabla f=\left[ \begin{aligned}& \frac{\pa ...

  9. c++复杂桶排序Java版

    c++复杂桶排序Java版 题目和我的前几个排序一样 这次是Java版的 代码 + 注释 package com.vdian.qatest.supertagbiz.test.niu; /** * Cr ...

  10. C++学习书籍推荐《More Exceptional C++(英文)》下载

    百度云及其他网盘下载地址:点我 作者简介 Herb Sutter is the author of three highly acclaimed books, Exceptional C++ Styl ...