vue里面v-bind和Props 利用props绑定动态数据的方法

如下所示：

<add v-bind:子组件的值="父组件的属性"></add> 
<div id="app">
  <add v-bind:btn="h"></add>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      h: "hello"
    },
    components: {
      "add": {
        props: ['btn'],
        template: "<button>btn：{{btn}}</button>",
        data: function () {
          return {'btn': "123"}; //子组件同名的值被覆盖了
        }
      }
    }
  });
</script>

说明：

【1】btn使用的父组件data中 h的值；

【2】子组件的data的函数中返回值被覆盖了。

【3】也就是说，使用v-bind的是使用父组件的值（根据属性名），没有使用v-bind的是将标签里的数值当做字符串来使用。

【4】依然需要使用props，否则他会取用自己data里的btn的值

以上这篇vue里面v-bind和Props 利用props绑定动态数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue组件中使用props传递数据的实例详解

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa

  • Vuejs第九篇之组件作用域及props数据传递实例详解

    本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc

  • Vuejs 组件——props数据传递的实例代码

    本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#Props 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <scr

  • Vue组件选项props实例详解

    Vue组件选项props实例详解

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据

  • Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案

    在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱. 解决方案一 然后开始参考网上和github上的方案等等,发现很多解决方案是这样的 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch data副本,emit一个函数 通知到组件外 这里以最常见的 modal为例子:

  • vue里面v-bind和Props 利用props绑定动态数据的方法

    如下所示: <add v-bind:子组件的值="父组件的属性"></add> <div id="app"> <add v-bind:btn="h"></add> </div> <script> var vm = new Vue({ el: '#app', data: { h: "hello" }, components: { "ad

  • 在vue中使用Echarts利用watch做动态数据渲染操作

    依旧直接上代码- 首先安装引入Echarts,我是直接把Echarts挂到VUE全局变量上了 //引入echarts import Vue from 'vue'; import echarts from 'echarts'; Vue.prototype.$echarts = echarts; <template> <div class="demo-container"> <div ref="chart_wrap" class="

  • 解说mysql之binlog日志以及利用binlog日志恢复数据的方法

    众所周知,binlog日志对于mysql数据库来说是十分重要的.在数据丢失的紧急情况下,我们往往会想到用binlog日志功能进行数据恢复(定时全备份+binlog日志恢复增量数据部分),化险为夷! 废话不多说,下面是梳理的binlog日志操作解说: 一.初步了解binlog MySQL的二进制日志binlog可以说是MySQL最重要的日志,它记录了所有的DDL和DML语句(除了数据查询语句select),以事件形式记录,还包含语句所执行的消耗的时间,MySQL的二进制日志是事务安全型的. ---

  • vue单页应用在页面刷新时保留状态数据的方法

    在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉.这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你 一.问题 现在产品上有个需求:单页应用走到某个具体的页面,然后点击刷新后,刷新的页面要与刷新前的页面要保持一致. 这时候就需要我们保存刷新之前页面的状态. 二.一种解决方案 在这个Vue单页应用中,王二是用Vuex作为状态管理的,一开始王二的思路是将Vuex里的数据同步更新到localStorage里. 即:一改变vuex里的

  • SpringCloud Gateway 利用 Mysql 实现动态路由的方法

    SpringCloud Gateway 利用 Mysql 实现动态路由的方法

    需求描述 标准网关动态路由功能是重要的一环,将路由.断言以及过滤器信息,持久化到 Mysql 中,通过配置后台页面实现路由.断言.以及过滤器等配置的增删改查. Spring Cloud Gateway 路由及黑白名单实现背景 Spring Cloud 路由API Spring Cloud Gateway 通过定义 RouteDefinitionRepository 来实现动态路由. //保存路由缓存 public interface RouteDefinitionWriter { Mono<Vo

  • Centos7 利用LVM实现动态扩容的方法

    Centos7 利用LVM实现动态扩容的方法

    摘要:最近项目组里来了很多新人,对linux分区及各种应用使用的分区不了解,导致测试数据库时突然发现某一个分区被写满了,不得不重装OS.实在看不下去了,特此分享我的一些利用LVM实现动态扩容的心得,希望对大家有帮助. 知识储备: LVM是逻辑盘卷管理(Logical VolumeManager)的简称,它是Linux环境下对磁盘分区进行管理的一种机制,LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管理的灵活性.通过LVM系统管理员可以轻松管理磁盘分区,如:将若干个磁盘分区连接为一个整块

  • 利用Golang解析json数据的方法示例

    本文主要给大家介绍的是关于Golang解析json数据的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 使用 Golang 解析 json 数据,这种 json 格式是对象的数组,官方文档有一个示例: var jsonBlob = []byte(`[ {"Name": "Platypus", "Order": "Monotremata"}, {"Name": "Quoll

  • Android利用ContentProvider获取本地数据的方法

    上一篇,我们讲到ContentProvider的主要功能是,提供共享数据给其他应用使用.在Android系统内部,同样提供了共享数据,查看 android.provider 包下,发现有以下的共享数据 本地多媒体(图片.音视频等) 通讯录联系人 通话记录 短信记录 ... 当然,这些数据必须通过用户授权后才可以调用,所以在调用前请申请对应的权限(6.0系统以上) 复制代码 代码如下: requestPermissions(new String[]{Manifest.permission.READ

  • node.js利用redis数据库缓存数据的方法

    node.js利用redis数据库缓存数据的方法

    一.运行redis Redis服务器默认使用6379端口 redis-server 自定义端口 redis-server –port 6390 客户端 redis-cli 指定ip和端口连接 redis-cli -h 127.0.0.1 -p 6390 测试客户端和服务器是否连通 ping 二.Nodejs连接redis 通过redis.createClient(port,host,options)来连接redis服务器 var redis = require("redis") var

  • Springmvc 4.x利用@ResponseBody返回Json数据的方法

    下面是官方文档对于@ResponseBody注解的解释: Mapping the response body with the @ResponseBody annotation The @ResponseBody annotation is similar to @RequestBody. This annotation can be put on a method and indicates that the return type should be written straight to

随机推荐