Vue之组件传值

原创已于 2024-12-23 10:25:37 修改 · 236 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-12-23 10:24:29 首次发布

前端学习--从入门到放弃专栏收录该内容

15 篇文章

订阅专栏

在组件中使用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>