欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2020-11-16 11:16:33|栏目:vue|点击:

如下所示:

<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.js iview打包上线后字体图标不显示解决办法

栏    目:vue

下一篇:详解nuxt sass全局变量(公共scss解决方案)

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

本文地址:http://www.codeinn.net/misctech/22956.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有