vue之props传值与单向数据流

最新推荐文章于 2023-03-01 15:06:25 发布

weixin_30522183

最新推荐文章于 2023-03-01 15:06:25 发布

阅读量259

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jianxian/p/10669046.html

版权

（1）组件通信

父组件向子组件传递数据。这个正向传递数据的过程就是通过props来实现的。

两者区别：props中声明的数据与组件data函数return返回的数据的主要区别就是props来自父级，而data中是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template、计算属性computed、方法methods中使用。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo1</title>
    <script type="text/javascript" src="vue-2.6.9.min.js"></script>
</head>
<body>
  <div id="demo">
    <textarea v-model="message" v-bind:placeholder="placeholder"></textarea>
    <demo-component v-bind:message="message"></demo-component>
  </div>
  <script type="text/javascript">
    Vue.component('demo-component',{
      props:['message'],
      template:`
        <div class="demo-area">
          {{message}}
        </div>
      `
    });
    var demo = new Vue({ el:'#demo', data:{ message:'来自父级的数据', placeholder:'请输入' } }) </script> </body> </html>

（2）单向数据流

业务中会经常遇到两种需要改变props的情况，一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件data中再声明一个数据，引用父组件的prop

  <div id="demo">
    <demo-component v-bind:initcount="initcount"></demo-component>
  </div>
  <script type="text/javascript">
    Vue.component('demo-component',{
      props:['initcount'],
      template:`
        <div class="demo-area">
          {{count}}
        </div>
      `,
      data:function(){
        return { count:this.initcount } } }); var demo = new Vue({ el:'#demo', data:{ 'initcount':'1' } }); </script>

组件里声明了数据count，它在组件初始化时会获取来自父级组件的initcount，之后便与之无关，只用维护count，这样就可以避免直接操作initcount。

（3）另一种情况就是prop作为需要被转变的原始值传入，这种情况用计算属性即可。

  <div id="demo">
    <demo-component v-bind:width="width"></demo-component>
  </div>
  <script type="text/javascript">
    Vue.component('demo-component',{
      props:['width'],
      template:`
        <div class="demo-area" v-bind:style="style">
          组件内容
        </div>
      `,
      computed:{
        style(){
          return {width:this.width+'px'};
        }
      }
    });
    var demo = new Vue({
      el:'#demo',
      data:{
        'width':100
      }
    });
  </script>

转载于:https://www.cnblogs.com/jianxian/p/10669046.html

weixin_30522183

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue之props传值与单向数据流

（1）组件通信父组件向子组件传递数据。这个正向传递数据的过程就是通过props来实现的。两者区别：props中声明的数据与组件data函数return返回的数据的主要区别就是props来自父级，而data中是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template、计算属性computed、方法methods中使用。<!DOCTYPE html...
复制链接

扫一扫