Vue.js Vue中子组件的意外重新加载程序

你能解释一下为什么每次点击“测试”按钮时都会重新选择in child吗？它不使用在单击处理程序中创建的新字段。如何修复它

子组件的源：

导出默认值{
注入：[“字段”]，
更新的（）{
console.log（“更新子项”）；
}
};

父组件的源

当前值：{{data}}
试验
从“/Test.vue”导入测试；
从“Vue”导入Vue；
导出默认值{
组成部分：{
试验
},
提供（）{
返回{
菲尔兹：这是菲尔兹
}
},
方法：{
测试（）{
set（this.fields，Math.random（），Math.random（））
}
},
更新的（）{
console.log（“更新父项”）；
},
数据（）{
返回{
字段：{
测试：[]
}
};
}
};

简而言之，由于模板绑定发生更改，因此需要重新呈现。原因如下：

• 每当组件重新渲染时，

  更新的

  钩子就会运行

• 如果组件模板中的绑定发生更改，组件将重新呈现

• 示例中的子组件绑定到其模板中的

  字段

  （从

  提供

  ）

• 字段

  在运行

  测试

  方法时发生更改

• 我猜Vue无法检测何时只有特定属性发生了更改（即

  字段。test

  ），因此，为了安全起见，如果

  字段发生更改，Vue将重新呈现。这可能与您必须首先使用
  Vue.set
  的原因相同（属性更改检测）
  

您只需在属性本身上使用

provide

即可解决此问题：

provide（）{
返回{
测试：this.fields.test
};
},

在儿童中：

inject: ["test"]

在子模板中：

<slot class="hello" v-bind="test"></slot>

由于子模板中不再使用

字段

，因此在字段更改时不会重新渲染