Question

我有Vue组件01女巫持有另一个Vue组件女巫将是Vue组件02。在Vue 01中，我使用ajax请求来获取数据并将其作为vue 02的道具传递给vue02。但是问题是一个ajax请求后，vue 02不会根据新数据刷新其道具，除非我刷新Web浏览器，有什么办法像每个ajax请求一样，仅从vue 01中刷新组件吗？

编辑：这是vue 01内部的子vue

<show-data-table
            v-if="show_data_table"
            :data=this.selected_table_data
            :col_names=this.selected_table_col_names
            :header=this.header
            :columns_count=this.col_count
            :rows_count=this.row_count
            :tble_name=this.selected_table_name
            :database=this.db_name
        ></show-data-table>

这是ajax请求：

 axios.post("/database/information-table", formData, config, {})
                .then(response => {
                    if (response.data.code == 200) {
                        // console.log(response.data);
                        this.selected_table_data = [];
                        this.selected_table_name = '';
                        this.selected_table_col_names = [];
                        this.selected_table_data = response.data.data;
                        this.selected_table_name = response.data.table_name;
                        this.selected_table_col_names = response.data.column_names;
                        
                        this.show_data_table = true;
                    }
                });

和数据部分：

data() {
        return {
            db_name: this.database_name,
            tables: this.database_tables,
            table_name: "",
            selected_table_name: "",
            selected_table_data: [],
            selected_table_col_names: [],
            show_data_table: false,
            name: "",
            header: true,
            row_count: 0,
            col_count: 0,
            servs: false,
        };
    },

Answer 1

不用更多代码就很难说...

两个最常见的错误：

必须在父组件的data部分中声明父中所有应该是可响应的数据，否则它将是不可响应的：

data: {
  return() {
    selected_table_data: [],
    selected_table_name: [],
    selected_table_col_names: []
  }
}

https://vuejs.org/v2/guide/instance.html#Data-and-Methods

孩子应该直接使用道具，而不是声明自己的数据并通过道具进行初始化：

不要那样做（孩子）：

data: {
  return() {
    selected_table_data: this.selected_table_data,
    selected_table_name: this.selected_table_name,
    selected_table_col_names: this.selected_table_col_names
  }
}

为什么：创建组件时，子项data的功能仅运行一次。如果它存储了父母通过props给出的引用，并且父母的props值后来被新值替换，则child不会知道更改。

重新加载另一个Vue组件内部的Vue组件

1 个答案: