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>

Vue组件方法多样,具体如下: - **父组件向子组件**:使用 `props` 进行。在父组件里,借助 `v-bind` 指令把数据绑定到子组件的 `props` 上。示例如下: ```vue <template> <div> <child-component :message="message"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { message: 'Hello World!' } } } </script> ``` 子组件接收并使用 `props` 数据: ```vue <template> <div> {{ message }} </div> </template> <script> export default { props: ['message'] } </script> ``` - **子组件向父组件**:子组件通过派发事件的方式给父组件数据,或者触发父组件更新等操作。示例如下: ```vue <!-- Child.vue --> <template> <button @click="handleClick">Send Message</button> </template> <script> export default { data() { return { msg: "这是发给父组件的信息" } }, methods: { handleClick() { this.$emit("sendMsg", this.msg) } } } </script> <!-- Parent.vue --> <template> <child @sendMsg="getChildMsg"></child> </template> <script> export default { methods: { getChildMsg(msg) { console.log(msg) } } } </script> ``` - **非父子组件**:常用 `EventBus` 方案进行数据递,定义方式有三种: - **方法一**:抽离成一个单独的 `js` 文件 `EventBus.js`,然后在需要的地方引入。示例如下: ```javascript // EventBus.js import Vue from "vue" export default new Vue() ``` ```vue // ComponentA.vue <template> <button @click="sendMessage">Send Message</button> </template> <script> import eventBus from './EventBus.js' export default { methods: { sendMessage() { eventBus.$emit('messageEvent', 'Hello from ComponentA') } } } </script> // ComponentB.vue <template> <div></div> </template> <script> import eventBus from './EventBus.js' export default { mounted() { eventBus.$on('messageEvent', (msg) => { console.log(msg) }) } } </script> ``` - **方法二**:直接挂载到全局。在 `main.js` 中操作: ```javascript import Vue from "vue" Vue.prototype.$bus = new Vue() ``` 在组件中使用: ```vue // ComponentA.vue <template> <button @click="sendMessage">Send Message</button> </template> <script> export default { methods: { sendMessage() { this.$bus.$emit('messageEvent', 'Hello from ComponentA') } } } </script> // ComponentB.vue <template> <div></div> </template> <script> export default { mounted() { this.$bus.$on('messageEvent', (msg) => { console.log(msg) }) } } </script> ``` - **方法三**:注入到 Vue 根对象上。在 `main.js` 中操作: ```javascript import Vue from "vue" new Vue({ el: "#app", data: { Bus: new Vue() } }) ``` 在组件中使用: ```vue // ComponentA.vue <template> <button @click="sendMessage">Send Message</button> </template> <script> export default { methods: { sendMessage() { this.$root.Bus.$emit('messageEvent', 'Hello from ComponentA') } } } </script> // ComponentB.vue <template> <div></div> </template> <script> export default { mounted() { this.$root.Bus.$on('messageEvent', (msg) => { console.log(msg) }) } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值