Vue cli之传递数据

1、父组件的数据传递给子组件

 

 

 

 

// 父组件
<Menu title="来自Home的数据" :clickNum="num"></Menu>

// 子组件
<li @click="clickNum++">{{clickNum}}</li>

props: {  // 接收来自父组件的数据
    title: {
      type: String,   // 必须写类型，如果有多个类型，则可以写成 type: [String,Object,Number,Boolean,]
      default: "默认值",   // 默认值
      required: false,    // 是否是必填传参
    },
    clickNum: {
      type: Number,
    }
  },

　　

使用父组件传递数据给子组件时, 注意一下几点:

1. 传递数据是变量,则需要在属性左边添加冒号。传递数据是变量,这种数据称之为"动态数据传递"。传递数据不是变量,这种数据称之为"静态数据传递"

2. 父组件中修改了数据,在子组件中会被同步修改,但是,子组件中的数据修改了,是不会影响到父组件中的数据.这种情况,在开发时,也被称为"单向数据流"

 

 

2、子组件传递数据给父组件

在子组件中，通过this.$emit('自定义事件名', 参数1,参数2,...)来调用父组件中定义的事件

 

 

 

 

// 子组件
watch:{
    clickNum(){
      this.$emit("setNum",this.clickNum);
    }
  },
// 父组件
<Menu @setNum="setNum" title="来自Home的数据" :clickNum="num"></Menu>
methods:{
    setNum(num){
      this.num = num;
    }
  },
      

　　

注意：子组件中往父组件传递数据，也是属于单向数据量。