vue父子组件之间传递数据（vue学习笔记）

1. 父组件向子组件传值

1.1父组件： 

通过 v-bind 的形式进行传递
例：通过 v-bind 属性把 pInfo 的值赋给 info 变量 

<child :info="pInfo"></child>

 1.2子组件：

props：接收父组件传递的值，可校验传递的数据

校验属性
type：限制传递的数据类型
required：设置数据是否必传（true：是，false：否）
default：设置默认值，若父组件未向子组件传递数据，使用此数据
validator：自定义校验，例：父组件传递的数据长度必须大于 5

  props: {
    info: {
      type: String,
      required: true,
      validator:function(value){
      	return (value.length > 5)
      }
    }
  },

 1.3通过watch侦听器，侦听父组件传递的值，实现动态传递数据

监听父组件传回来的 info 数据
当父组件传回来的数据发生改变时会执行侦听器中的方法

父组件代码：

<template>
  <div>
    <child :info="pInfo"></child>
  </div>
</template>

<script>
//子组件地址（仅供参考），具体以实际项目目录地址为准
import child from "./Child.vue";
export default {
  components: {
    child: child
  },
  data() {
    return {
      pInfo: "父组件数据"
    };
  }
};
</script>

<style scoped>
</style>

 子组件代码：

<template>
  <div>
    <div>子组件接受父组件数据：{{ infoText }}</div>
  </div>
</template>

<script>
export default {
  //接收父组件传递的数据
  props: {
    info: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      infoText: ""
    };
  },
  mounted() {
    this.infoText = this.info;
  }
};
</script>

<style scoped>
</style>

 2 子组件向父组件传值

子传父：子组件向父组件传值是通过方法传递的，也可以说是子组件调用父组件方法。 

2.1子组件

通过 $emit() 向外触发父组件中方法，同时进行数据的传递
例：通过 $emit 触发父组件中的received方法， msg 为子组件向父组件穿的数据 

const msg = "执行了";
this.$emit("received", msg);

 2.2父组件

通过事件方法监听子组件的状态
例：通过 v-on 方法监听hideDrawer方法

<child @received="hideDrawer"></child>

 实例：

子组件：

<template>
    <div class="my-input-number">
      <!-- 递减 -->
      <span
        @click="sub"
        role="button"
        class="my-input-number__decrease"
        :class="{ 'is-disabled': num == 0 }"
      >
        -
      </span>
      <!-- 累加 -->
      <span
        @click="add"
        role="button"
        class="my-input-number__increase"
        :class="{ 'is-disabled': num == 10 }"
      >
        +
      </span>
      <div class="my-input">
        <!-- 数字显示区域 -->
        <span class="my-input__inner">{{ num }}</span>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        // num: 0,
      };
    },
    props:{
      num:{
        type:Number,
        required:true,
      }
    },
    methods: {
      // +号的点击事件
      add() {
        // 小于10才允许++
        if (this.num < 10) {
          // this.num++;
          this.$emit('changeNum',this.num+1)
        }
      },
  
      // -号的点击事件
      sub() {
        // 大于0才允许--
        if (this.num > 0) {
          // this.num--;
          this.$emit('changeNum',this.num-1)
        }
      },
    },
    //因为number的值会变化所以需要使用watch侦听器来观察number的变化
    // watch:{
    //     num(){
    //         //一旦观察到了number值的改变，需要做的事情
    //         //我现在要做的事情就是一旦number值改变了把改变后的值传递给父组件
    //         //通过$emit来向父组件传递自定义事件以及数据.
    //         this.$emit('changeNum',this.num)
    //     }
    // }
  };
  </script>
  
  <style>
  .my-input-number {
    position: relative;
    display: inline-block;
    width: 180px;
    line-height: 38px;
  }
  .my-input-number span {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
  .my-input-number .my-input {
    display: block;
    position: relative;
    font-size: 14px;
    width: 100%;
  }
  .my-input-number .my-input__inner {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
    text-align: center;
  }
  .my-input-number .my-input-number__decrease,
  .my-input-number .my-input-number__increase {
    position: absolute;
    z-index: 1;
    top: 1px;
    width: 40px;
    height: auto;
    text-align: center;
    background: #f5f7fa;
    color: #606266;
    cursor: pointer;
    font-size: 13px;
  }
  .my-input-number .my-input-number__decrease {
    left: 1px;
    border-radius: 4px 0 0 4px;
    border-right: 1px solid #dcdfe6;
  }
  .my-input-number .my-input-number__increase {
    right: 1px;
    border-radius: 0 4px 4px 0;
    border-left: 1px solid #dcdfe6;
  }
  .my-input-number .my-input-number__decrease.is-disabled,
  .my-input-number .my-input-number__increase.is-disabled {
    color: #c0c4cc;
    cursor: not-allowed;
  }
  </style>

父组件：

<template>
  <div id="app">
<base-number @changeNum="num = $event" :num ="num"></base-number>
         <p>当前数字是:{{num}}</p>
         <button @click="num = 10;">将值改为10</button>
    </div>
</template>

<script>
import BaseNumber from './components/BaseNumber'


export default {
  name: 'App',
  components: {

    BaseNumber,

  },
  data(){
    return{
      num: 0,
    }
  },
  methods:{
    del(){
      alert("触发了")
    },
    fn(data){
      console.log('接受到子组件的通知了',data);
    },
    fn1(){
      console.log('接收到子组件通知删除了');
    },
    changeNum(val){
      this.num = val
    }
  },
}
</script>

<style>
#app {
  text-align: center;
}
#app ul {
  padding: 0;
  max-height: 200px;
  overflow-y: scroll;
  margin-bottom: 0;
}
#app ul::-webkit-scrollbar {
  width: 0 !important;
}
#app li {
  list-style: none;
  border-bottom: 1px solid #6a4d52;
  text-align: left;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 25px;
  color: #8895a8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 40px;
}
#app li:hover {
  background-color: #fcfaed;
}
#app li span {
  color: #6a4d52;
}
#app .bottom {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  color: #929093;
}
.bottom span {
  font-weight: 500;
}
</style>

通过 $emit 触发父组件中的changeNum方法， num+1为子组件向父组件穿的数据 

通过 v-on 方法监听changeNum方法