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

Posted 2023-02-22

【中文标题】重新加载另一个 Vue 组件内部的 Vue 组件

【英文标题】：Reloading a Vue component that is inside of another Vue component

【发布时间】：2021-02-14 18:27:56

【问题描述】：

我有 Vue 组件 01 女巫持有另一个 Vue 组件女巫将是 Vue 组件 02。在 Vue 01 中，我使用 ajax 请求来获取数据并将其作为 vue 02 的道具传递给 vue 02。但是问题是在一个 ajax 请求之后 vue 02 不会根据新数据刷新它的 props，除非我刷新网络浏览器，有没有办法像每个 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,
        ;
    ,

【问题讨论】：

您可以将密钥分配给组件。 <my-component :key="myComponentKey"></my-component>。每次要刷新组件时，将myComponentKey 更改为所需的任何值。但奇怪的是 Vue 不刷新 props。你能分享你的代码吗？

你做错了，如果你通过 props 将数据传递给子组件并且如果父组件数据被更新，那么事情应该可以正常工作，因为我们正在通过 props 设置重新激活，如果事情仍然不清楚在 Skype 上联系我：syed_haroon

伙计们，我在这里发布了代码，父母对新数据有反应，但孩子出于某种原因不接受它们

显示更多代码然后...

【参考方案1】：

没有更多代码很难说......

两个最常见的错误：

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

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

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

孩子应该直接使用 props，而不是声明自己的数据并从 props 初始化：

不要那样做（孩子）：

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 从 parent 提供的引用，并且 parent 的 props 值稍后被新值替换，则 child 将不知道更改。

【讨论】：

是的，孩子有自己独特的数据。它没有重复。随时告诉我我错了...但是由于组件 2 每次接收新数据时都不会重新安装，所以这不是问题吗？？

***.com/a/47466574/13142340 我找到了解决方案，它只是为子组件分配键，因此它会根据键更改重新呈现自己。感谢大家花时间在这个问题上

这不是一个好的解决方案 - 只是一个 hack ......它会在未来烧毁你......