vue之props传值与单向数据流

（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。

vue之props传值与单向数据流

猜你喜欢