最近研究一個用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;//隨便什麽代碼都行
          }
    },

這樣，實現了打開子部件後自動執行某些操作的功能。

Vue.js中傳值給子部件及觸發動作的問題