当前位置：首页 > news >正文

做网站副业百度的网站

news 2026/4/7 16:36:05

做网站副业,百度的网站,页面模板功能找不到,wordpress upload_max_filesize目录本节内容示例代码总结欢迎关注『VUE』专栏，持续更新中欢迎关注『VUE』专栏，持续更新中本节内容父组件传子组件–props 子组件传父组件–自定义事件本节讲子组件传父组件–通过props里的方法传递,就是父亲写了一个函数,给子组件调用,然后…

本节内容

父组件传子组件–props
子组件传父组件–自定义事件

本节讲子组件传父组件–通过props里的方法传递,就是父亲写了一个函数,给子组件调用,然后通过这个方法父亲拿到了子组件的数据.

示例代码

<ComponentS title="标题" :onEvent="dataGive" />传递dataGive方法给子组件
子组件中接收方法

  props: {title: String,onEvent: Function,},

子组件中调用方法

  <p>给父组件传的数据:{{ onEvent("我是子组件的数据") }}</p>

父组件中拿到数据

    dataGive(data) {console.log("子组件传递给父组件的数据:", data);this.message = data;},

在这里插入图片描述

ComponentP.vue

<template><h3>组件事件父组件</h3><ComponentS title="标题" :onEvent="dataGive" /><div>子组件传递给父组件的数据:{{ message }}</div>
</template><script>
import ComponentS from "./ComponentS.vue";export default {data() {return {message: "",};},components: {ComponentS,},methods: {dataGive(data) {console.log("子组件传递给父组件的数据:", data);this.message = data;},},
};
</script>

ComponentS.vue

<template><h3>组件事件子组件</h3><p>{{ title }}</p><p>给父组件传的数据:{{ onEvent("我是子组件的数据") }}</p>
</template><script>
export default {data() {return {};},props: {title: String,onEvent: Function,},
};
</script>