Vue组件（二）组件传值

一、父组件向子组件传值

我们可以用props向子组件传值；

1. 基础用法

• 组件代码

<template>
  <div>
    // 可以直接使用传值的名称
    这是一个组件: {{ name }}
  </div>
</template>

<script>
export default {
  name: "customInput",
  // 用props接受父组件传的值
  props: ["name"]
};
</script>

• 父组件使用

<template>
  <div class="home">
    首页
    // 在这里可以直接传值，也可以用动态的方式传值
    // 这里的name是子组件内定义的属性名称
    <customInput name="zhangsan"></customInput>
  </div>
</template>

<script>
import customInput from "./customInput"
export default {
  name: 'Home',
  components: { customInput }
}
</script>

截图

2.props验证

我们可以再子组件内定义props的时候，对props值进行定义（包括类型，默认值等）

<template>
  <div>
    这是一个组件: {{ name }}
  </div>
</template>

<script>
export default {
  name: "customInput",
  props: {
    name: {
      type: String,  // 定义属性的类型必须为字符串
      required: true, // 属性必须传值，否则会报异常
      default: "aaaa"  // 属性的默认值
    }
  }
};
</script>

3.props值监听

当属性值发生变化的时候，我们希望在子组件内监听到它的变化；

<template>
  <div>
    这是一个组件: {{ name }}
  </div>
</template>

<script>
export default {
  name: "customInput",
  props: {
    name: {
      type: String,
    }
  },
  // 使用watch可以监听到数据的变化
  watch: {
   // 监听属性name的变化
    name: {
      immediate: true, // 这个值必须设置为true，否则不会监听
      handler(val) {
        // 属性值变化后，会调用此函数
        console.log(val)
      }
    }
  }
};
</script>

二、子组件向父组件传值

当子组件做了一些操作之后，我们需要告诉父组件，还可能会给父组件传一些值回去；这就需要用到vue里面的自定义事件；

• 子组件代码
  在子组件内使用$emit(eventName, arg)触发事件

<template>
  <div>
    <el-button type="primary" @click="respondsToClick">点击</el-button>
  </div>
</template>

<script>
export default {
  name: "customInput",
  data() {
    return {
      count: 0
    }
  },
  methods: {
    respondsToClick() {
      this.count += 1
      // 这里触发了change事件，并传递了参数
      this.$emit("change", '点击了' + this.count + '次')
    }
  }
};
</script>

• 父组件代码
  在父组件内使用$on(eventName)监听事件

<template>
  <div class="home">
    首页:{{ content }}
    // 这里监听change事件，并执行handle方法
    <customInput v-on:change="handle"></customInput>
  </div>
</template>
<script>
import customInput from "./customInput"
export default {
  name: 'Home',
  components: { customInput },
  data() {
    return {
      content: ''
    }
  },
  methods: {
    // 监听事件执行的方法，并接受参数
    handle(val) {
      this.content = val
    }
  }
}
</script>