Vue.js中传值给子部件及触发动作的问题

最近研究一个用vue.js做的程序并修改增加功能。其中用到传值给子部件等问题。

template中有个子部件:

<template>

......

     <child-form  v-if="flag=1" ></child-form>

要传值给它,方法是:

1. 本template中定义一个data:

    data() {
       return {
flag:0, someId:
"" } }

2. 子部件中定义一个props:

    props: [
      'someId'
    ],

3. 添加属性,绑定:

 <child-form  v-if="flag=1" :someId="someId" ></child-form>

4. 在本template的某个方法中给someId赋值并打开子部件:

    methods: {
      openChild() {
          this.someId = "test";
          this.flag = 1;
     }
   }

5. 以上是比较常规的做法,现在问题来了,希望子部件打开后自动执行某些操作,但是随便哪个事件都不好使,mounted, created等等都试过了,都不管用,最后用了下面比较笨拙的办法。第一次接触vue.js,经验不足。

首先将某个v-model设为该属性的值:

    data() {
      return {
        form: {
          id: this.someId,
          body:''
        },
        tmp: "",

6. 然后设个computed:

    computed: {
      ct() {
        if (this.someId != null && this.someId != '') {
           this.tmp = "dummy";
        }
        return this.form.id;
      }
    },

7. 然后设个watch:

复制代码
    watch: {
          tmp() {
             if (this.someId != null && this.someId != '') {
                 //下面执行要做的操作
             }
          },
          ct() {
             let t = 0;//随便什么代码都行
          }
    },
复制代码

这样,实现了打开子部件后自动执行某些操作的功能。

posted @   平静寄居者  阅读(359)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示