当前位置: 首页 > article >正文

[异步监听事件、异步绑定属性]通过vue的this.$refs.组件.$props和.$on实现异步绑定组件属性和事件监听

child.vue

<template>
  <div>
    <el-button type="primary" @click.stop="$emit(`get`, data)">点击传参</el-button>
  </div>
</template>
<script>
export default { name: "child", props: ["data"] };
</script>

demo

<template>
  <child ref="child" :data="{}" />
</template>
<script>
import child from "@/vue/admin/demo/child";
export default {
  components: {
    child,
  },
  mounted() {
    this.$refs.child.$props.data.msg = `异步传输属性内容给子组件child`; //注意修改的数据一定要是对象类型,否则会报错Avoid mutating
    this.$refs.child.$on(`get`, this.get);
  },
  beforeDestroy() {
    this.$refs.child.$off(`get`, this.get);//记得要销毁哟,否则会很卡的!
  },
  methods: {
    get(d) {
      console.log(``, d.msg);
    },
  },
};
</script>


http://www.kler.cn/a/613655.html

相关文章:

  • Kubernetes 中导致 pod 重启的原因
  • PrimeTime生成.lib竟暗藏PG添加Bug
  • Skynet 中 snlua 服务启动整体流程分析
  • 工作后考研
  • 【STM32】GPIO输入(按键)
  • 交换机与路由器的区别:深入解析
  • 新手村:逻辑回归-理解04:熵是什么?
  • # 线性代数:660习题总结660# 宋浩讲解视频
  • 安装docker版jira8.0.2
  • Go 语言标准库中reflect模块详细功能介绍与示例
  • 如何使用 GPT-4o API 实现视觉、文本、图像等功能 附赠gpt升级和4o额度购买
  • OPPO Pad 4 Pro图赏,轻薄大屏,多面出色
  • QT四 资源文件;绘图;绘图设备;qpixmap 和 qimage 转换;QPixmap、QBitmap、QImage和 QPicture的区别
  • Golang中间件的原理与实现
  • 使用 Selenium 构建简单高效的网页爬虫
  • Docker Compose 基础知识
  • rnn的ho的维度 (num_layers * num_directions, batchsize, hidden_size)
  • 付账问题 | 第9届蓝桥杯省赛C++A组
  • Kafka 偏移量
  • 安卓车载app面经