Vue之组件传值

在组件中使用props定义好接收的参数名称、类型等

<script>
export default {
  name: "School",
  props: {
    msgProp: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      msg: "School"
    }
  },
}
</script>

<template>
  <div>
    <h1>自己的值：{{ msg }}</h1>
    <h1>传过来的值：{{ msgProp }}</h1>
  </div>
</template>

<style scoped>
div {
  color: red;
  font-size: 20px;
  background-color: #ccc;
  width: 800px;
  height: 800px;
}
</style>

在调用组件的地方，通过:传递参数

<script>
import School from "./components/School.vue";

export default {
  name: "App",
  components: {
    School
  },
  data() {
    return {
    }
  },
  methods: {
    showDOM(){
      console.log("App",this.$refs.school.$el);
    }
  }
}

</script>

<template>
  <div id="app">
    <School ref="school" :msgProp="'Hello World'"></School>
    <button @click="showDOM">点击showDOM</button>
  </div>
</template>

<style scoped>
</style>