单向数据流

数据从父级组件传递给子组件，只能单向绑定。

子组件内部不能直接修改从父级传递过来的数据。

 

<section id="app">
   <custom-component :count="count"></custom-component>
</section>

 

Vue.component("custom-component", {
  props: ['count'],
  template: `
          <div>
            <h1>一个自定义模版</h1>
            <input type="button"  @click="changeCount" value="按钮"/>
            {{count}}
          </div>`,
  methods: {
    changeCount() {
      this.count++
    }
  }
});

new Vue({
  el: "#app",
  data() {
    return {
      count: 0
    };
  }
});

控制台报错

控制台会出现报错：

避免在子组件数据被重写，可以改变props的情况，使用数据或计算属性来解决。

因此，以上代码可以“折中”解决：

使用data

 

 Vue.component("custom-component", {
            //作为data中局部数据的初始值来过渡，必须以函数形式申明，
            //相当于子组件里操作的都是this.count的指针
            data() {
                return {
                    initCount: this.count
                }
            },
            props: ['count'],
            template: `
            <div>
                <h1>一个自定义模版</h1>
                <input type="button"  @click="changeCount" value="按钮"/>
                <!--该处应该是使用initCount而不是count-->
                {{initCount}}
            </div>`,
            methods: {
                changeCount() {
                  //这里计算的也是initCount
                    this.initCount++
                }
            }
        });

使用computed

 

Vue.component("custom-component", {
            data() {
                return {
                    initCount: this.count
                }
            },
            //与直接使用data不同的是这里添加选项参数计算属性`computed`
            computed: {
                initCount2() {
                    return this.initCount;
                }
            },
            props: ['count'],
            template: `
            <div>
                <h1>一个自定义模版</h1>
                <input type="button"  @click="changeCount" value="按钮"/>
                <!--这里现在使用的是computed里的函数返回结果-->
                {{initCount2}}
            </div>`,
            methods: {
                changeCount() {
                    this.initCount++
                }
            }
        });

子组件向外传值

挂载自定义事件

现在增加一个场景，在父组件也使用了count，当点击按钮的同时，父组件的count值同时也发生变化。

 

<section id="app">
        <h3>父组件使用了count</h3>
        <p>{{count}}</p>
        <!--需要在自定义模版标签上添加一个自定义事件来接收count值-->
        <custom-component :count="count" @increment-click="countHandle"></custom-component>
</section>

添加“通知”处理

此时，需要在子组件的点击触发事件changeCount()里做一个“通知”处理

 

changeCount() {
    this.initCount++;
    //触发一下"increment-click"事件， 通知父组件
    this.$emit("increment-click");
}

自定义事件

同时，也要在实例的作用域下增加自定义事件countHandle()

 

methods: {
  countHandle() {
    //此处的this.count 属于父组件的count
    this.count++;
  }
}

props验证

语法

• Key值为所需要验证的数据
• 验证类型为原生构造器：String， Number，Function， Object，Boolean，Array

 

props:{
  propA:Number  //单个指定类型
  propB:[String,Number],//多个指定类型
  propC:{
        //必传，且指定类型为字符串
        type:String,
         required:true 
        },
   propD:{
        //数值类型，默认值为1000
        type:Number,
          default:function(){
            return 1000;
          }
   }
  propE:{
    //自定义验证规则
        validator:function(value){
          return value>10
        }
  }
}

多提一句，在 propD里，添加了个默认值default，在自定义标签上就可以不用绑定count。

 

<!--未使用default-->
<custom-component :count="count" @increment-click="countHandle"></custom-component>

<!--使用default-->
<custom-component @increment-click="countHandle"></custom-component>

报错

组件可以为props指定验证要求，如果未通过指定验证要求，Vue控制台会发出警告。

转载自：https://www.jianshu.com/p/1ebc15645abe