最近研究一个用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;//随便什么代码都行
}
},

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

05-12 06:14