更新Vue.js中的父类
是指在Vue.js中修改父组件的数据或属性。在Vue.js中，父组件通过props属性将数据传递给子组件。如果需要更新父组件的数据，可以通过事件机制来实现。
首先，在子组件中使用$emit方法触发一个自定义事件，并传递需要更新的数据作为参数。例如：
// 子组件中
this.$emit('update-parent', newData);然后，在父组件中监听这个自定义事件，并在事件处理函数中更新父组件的数据。例如：
<!-- 父组件中 -->
<template>
<div>
<child-component @update-parent="updateData"></child-component>
</div>
</template>
<script>
export default {
data() {
return {
parentData: 'Initial data'
};
},
methods: {
updateData(newData) {
this.parentData = newData;
}
}
};
</script>这样，当子组件中触发了update-parent事件时，父组件的updateData方法会被调用，从而更新父组件的数据。
在Vue.js中，更新父组件的数据是一种单向数据流的模式，即父组件向子组件传递数据，子组件通过事件通知父组件更新数据。这种模式可以保证数据的一致性和可维护性。
推荐的腾讯云相关产品：无
参考链接：
- Vue.js官方文档：https://vuejs.org/
- Vue.js中文文档：https://cn.vuejs.org/
相关·内容
1回答
当我设置strict: true时，我会得到错误：
vue.js:525 [Vue warn]: Error in watcher "state"
(found in root instance)
warn @ vue.js:525
run @ vue.js:1752
update @ vue.js:1720
notify @ vue.js:584
reactiveSetter @ vue.js:814
Transform.resize @ transform.js:169
e.resize @ map.js:343
e._onWindowResize @ map.js:12
浏览 2提问于2016-12-29得票数 1
回答已采纳
我正在处理一个Vue.js项目，在父组件完成后，我需要在子组件中执行一些逻辑。特别是，子组件向父组件发出一个事件以保存某些数据。在此之后，父组件必须与子组件通信，并使其执行某些逻辑(在本例中为清除自己的状态)。
<template>
<div>
<child-component @save="saveData">
</div>
</template>
<script>
export default {
methods: {
saveData(event
浏览 3提问于2021-04-17得票数 0
回答已采纳
我对Vue.js相当陌生，最后我使用$parent在父组件上操作了一个数组。我只是想知道这样做是否有危险：
setTitle(title) {
this.$parent.items[this.index].name = title;
this.editTitle = false;
}
而不是用$emit发出一个事件，然后在父节点上监听它？
这会在将来以任何方式烧死我吗？
我想知道，因为我从未见过它像我所遇到的任何教程中的第一个解决方案。
浏览 3提问于2017-05-15得票数 0
回答已采纳
2回答
顺便说一句，在文档中，vue.js中的属性是单向绑定的：
请注意，JavaScript中的对象和数组是通过引用传递的，因此如果属性是数组或对象，则在子级中改变对象或数组本身将影响父状态。
所以我想知道，prop.sync是只用于"litteral“(即字符串、数字、日期)，还是必须与对象/数组一起使用？
我已经使用对象没有同步，所有的工作都很好，但我担心这不是做"vue.js“方式的好解决方案？
所以我的问题是:我可以在prop中使用对象/数组吗，没有同步，没有问题？
浏览 1提问于2018-01-28得票数 0
有时我会犯这样的错误：
TypeError: this.$parent.test()不是函数
以下是我在父母中的方法：
test() {
console.log('test')
}
这个孩子是：
...
if (this.$parent) {
this.$parent.test()
}
我知道还有其他方法可以做到这一点，但我想知道的是，我是否可以检查这个家长是否存在！！这在vue.js中有可能吗？？谢谢
浏览 1提问于2019-11-25得票数 0
回答已采纳
2回答
Vue呈现按钮
、、、
我的问题是在vue实例上呈现一个按钮，点击一个按钮，然后再用事件单击呈现另一个按钮，如果我简单地挂载这个按钮，它就不会得到函数tes。
const Hello = {
props: ['text'],
template: '<button v-on:click="tes"> </button> ',
};
new Vue({
el: '#app',
data: {
message: 'Click me'
},
methods:{
alerta
浏览 1提问于2018-06-15得票数 0
回答已采纳
我正在练习vuejs在组件之间传输数据，这是我的代码。
我的刀片模板：
`<app-user-details :name="name"></app-user-details>`
然后在“我的孩子”中：
<template>
<div>
<h4>You may view the user details here</h4>
<p>Many Details</p>
<p>User name: {{ name }}</p
浏览 2提问于2020-11-20得票数 4
1回答
我想问您，在VUE.JS组件'A‘中，是否有可能调用另一个使用组件'A’的VUE.JS组件'B‘的方法。
谢谢
浏览 5提问于2020-10-09得票数 0
回答已采纳
我对vuejs并不熟悉，我试图将活动数据同步到父级，但得到的错误如下
vue.js:523 Vue警告:避免直接更改支柱，因为每当父组件重新呈现时，值都会被覆盖。相反，使用基于支柱值的数据或计算属性。被突变的道具：“活动”(在组件中)
我的Vuejs代码如下
<div id="app">
<pre>
{{$data}}
</pre>
<div v-for="plan in plans">
<plan :plan="plan" :a
浏览 4提问于2016-12-19得票数 2
回答已采纳
1回答
在Vue.js中，如果我有一个组件(如custom-input )，并且希望从父类中设置焦点，那么是否可以将父类的指令应用于子类？
<custom-input v-focus />
<div class='form-group'>
<input :v-focus='vFocus'> // This doesn't work
</div>
<script type='text/javascript'>
Vue.directive("focus", {
浏览 3提问于2018-10-31得票数 5
回答已采纳
1回答
我有以下Vue.js组件，它们基本上应该有一个类似于无线电按钮的行为：
// Parent Component
<template>
<child-component
v-for="element in elements"
</child-component>
</template>
<script>
import ChildComponent from './Child.vue'
export default {
components: {
ChildComponent
浏览 2提问于2016-03-13得票数 1
回答已采纳
我在<oneChildComponent />中有一个基于<select>元素的代码块：
new Vue({
template:'
<select v-model="selectedOption" @change="handleChange">
<option value="" disabled>--Select--</option>
<option v-for="item in data" :
浏览 3提问于2020-08-06得票数 0
回答已采纳
我有一个关于Angular2 +(不是AngularJs)的问题。我是一个Vue.js程序员，我很好奇它是否有可能在角度上。
假设您的应用程序具有许多执行许多任务的模块。您有一个前端应用程序负责监视模块状态；显示日志、错误、通知用户某些模块已经完成工作等。这些模块通过WebSocket (或STOMP)与前端对话。如果前端接收到消息，则必须对其进行处理，并且必须更新模块的相应状态(例如标题)。因此，如果角接收到消息，他必须动态选择子组件并更新其状态(调用子方法)。
这是它在Vue.js:中的样子
父组件的内容：
<module ref="moduleA" ><
浏览 1提问于2018-09-11得票数 3
回答已采纳
我是javascript的新手。
通过阅读示例开始学习Vue.js。
但我对的代码片段感到困惑。
来自
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
我想知道为什么不能这样写代码
data: () => {
return {
msg: 'Welcome to Your Vue.js App'
}
}
我试过这两种代码，结果是一样的。
我无法从阅读Vue.js文档中理解。
请帮助我理解这个代码片段。
谢谢你花时间阅读我的
浏览 4提问于2017-03-24得票数 1
回答已采纳
1回答
当props是一个数组时，可以从子组件中修改父属性：
Vue.component('search-box', {
template: '#search-box-template',
props: ['who']
})
var vm = new Vue({
el: '#root',
data: {
who: ['a', 'b']
}
})
<script type="text/javascript" src="https://cdnjs.c
浏览 2提问于2017-06-08得票数 3
回答已采纳
3回答
我是Vue.js的新手。我对Vue组件之间的通信做了一些简单的练习。但我仍然有一个问题，谁是孩子，谁是家长。例如，我有以下代码：
HTML:
<body>
<div id="root" class="component">
<coupon @applied="onCouponApplied"></coupon>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js
浏览 7提问于2019-08-14得票数 1
回答已采纳
我使用Vue.js来修改DOM。我正在触发fetch_data()方法，该方法试图在AJAX调用成功完成后更新data.messages以读取“LovetheVue.JS”。
AJAX调用正在成功工作，它确实更新了该行中的data.message：
self.message = 'Love the Vue.JS'
我可以看到它的工作，因为它打印在控制台。问题是DOM没有使用data.message的新定义进行更新。当数据被更新时，我如何使它工作并更新DOM？
var app = new Vue({
delimiters: ['[[', ']]&#
浏览 3提问于2018-05-29得票数 5
回答已采纳
我需要使用带有Options的Vue.js 3访问子组件的方法。在中有一个答案，但它适用于Vue.js 2和Vue.js 3，但使用的是复合API。
我仍然在父组件中尝试过这一点：
<dropdown-list @update="updateChildComponents"></dropdown-list>
<child-component-1 ref="childComponent1Ref" :url="url"></child-component-1>
<child-component-2
浏览 5提问于2022-02-09得票数 1
回答已采纳
我有一个基于vuejs模板和单文件组件的SPA Vue.js应用程序。
由于遗留的原因，我必须将此应用程序嵌入到现有网站的网页中的IFRAME中。
在Vue.js组件中的方法中，我希望能够到达父窗口(即声明IFRAME的窗口)，例如打开警报或设置DOM元素的值。
我尝试过几种经典的JavaScript/HTML方法，但都没有成功。
浏览 1提问于2018-05-08得票数 2
回答已采纳
2回答
我想从子组件中更改父组件的支持值。这在vuejs 1中非常有用，但在vue 2中就不行了(我想在vue.js 2中使用它)。
下面是一个小例子：
HTML
<div id="app">
<parent :content="{value:'hello parent'}"><</parent>
</div>
JavaScript
var parent = {
template: '<child :content="content"></child
浏览 0提问于2018-02-27得票数 1
回答已采纳
和VUE.JS一起工作..。
有一个“theParent”组件，有两个孩子：'theForm‘和'theButtons’。(这是对更复杂情景的简化)。
在“theButtons”中有一个“清除”按钮来清除“theForm”表单的字段。
我能把事件从'theButtons‘传递给’家长‘，而不是从'theParent’传递到'theForm‘？
在“theButtons”中：
<b-button v-on:click="clean()">Clear</b-button>
methods: {
clean()
浏览 7提问于2020-12-01得票数 1
回答已采纳
我对Vue.js非常陌生，我只是偶然发现了一件很难做的事情(至少对我来说是这样)，其中Vue抱怨变异了一个道具(孩子们显然不应该更换父母的道具)。我本来要在8小时内放弃的，但后来成功了！不仅如此，我还提出了另一个解决方案。以下是两个解决方案：
使用watch：
const VueNavDrawerComp={
props : ["childSideNav", "menuItems"],
template :
/*html*/
`
...
`,
浏览 0提问于2021-07-28得票数 1
回答已采纳
1回答
我正在尝试将几个Vue.js组件从一个主应用程序中分离到存储在存储库中的npm包中。然后可以导入这个包，并在两个不同的站点上使用。我用Webpack来捆绑所有的东西，但是对应该使用的布局有一些疑问。
看到像Vue.js和Vuex这样的东西将作为主应用程序的依赖项来安装，我知道包一旦安装在这两个主要应用程序上就可以访问这些应用程序。
我的主要困惑是如何处理仅属于包的依赖项，是否将其捆绑为webpack的一部分，如果愿意的话，在应用程序上运行npm install会自动安装“依赖项”吗？这些东西有一般的标准吗？
浏览 1提问于2022-01-06得票数 1
回答已采纳
4回答
我最近开始使用Vue.js，我真的很喜欢它，但是我遇到了一些我不知道该如何做的事情。我已经搜索和阅读了文件，但没有找到解决办法。
当您向任何组件中添加CSS类时，Vue.js将自动添加或合并CSS类和子组件中的根元素。
这是一个很好的特性，但是我需要为特定的组件禁用这个特性，因为我希望将类添加到根元素的子元素中。
我做这把小提琴是为了说明
<div id="demo">
<child-component class="some-class"></child-component>
</div>
(“某些类”将自动
浏览 16提问于2017-03-31得票数 0
回答已采纳
我有一个显示某些项的Vue.js组件。当按下“编辑”按钮时，会显示内联编辑器。我还使用按名称对项目进行排序。问题是，在每次键传递之后，数组都会立即进行排序，产生一个奇怪的位置更改。排序逻辑在计算方法中。
<div id="app">
<div class="container">
<single-item v-for="item in orderedItems" :item="item" :key="item.id"></single-item>
&
浏览 2提问于2018-07-07得票数 0
回答已采纳
我正在使用vue.js和vuetify。 由父元素生成的元素存在于我的代码中。 我希望根据父类的子类动态地更改父元素的类，就像jQuery has()方法一样。 vue.js有什么办法做到这一点吗？ jQuery has()
浏览 40提问于2020-09-03得票数 0
回答已采纳
2回答
如何在vue js中使用监视功能
、、、、
请您告诉我如何在vue js中使用.I试图使用的watch函数，但我得到了这个错误。
vue.js:485 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "m"
found in
---> &l
浏览 2提问于2017-09-02得票数 1
1回答
我目前正在Vue.js中做一个项目，这是我第一次使用Webpack、Vue.js、Babel等开发一个完整的环境。
在以前的项目中，拥有导航栏是相当直截了当的.只需添加HTML结构，硬编码链接，就这样，导航栏就完成了.现在使用Vue.js，我认为这会破坏组件的感觉。我添加了一个<nav-bar>-component和几个<nav-bar-item>-components。这样做很好，导航栏将显示并包含项目。
现在到实际的问题:我现在把我的链接和文本为这些项目？我的猜测是将它们放在<nav-bar>-component中，但是文本是由<nav-bar-i
浏览 3提问于2016-11-27得票数 2
回答已采纳
3回答
由于我是Vue.js的新手，有没有人可以帮助我如何像在JQuery中那样从元素中删除类。
$('.class1').removeClass("class2");
浏览 1提问于2018-11-20得票数 9
回答已采纳
我正在学习Vue.js (3)。 我有一个组件，它被使用了很多时间(在一个循环中)。渲染器是这样的： ? 这个组件在创建时会生成一个get (axios)。所以如果我有10个循环，我有10个get返回相同的东西。 我尝试只进行一次调用(在第一个组件)，而不是其他调用，而不使用vuex。这在vue.js中是可能的吗?如何实现？(我尝试了"mounted“而不是"created"，但没有成功)。 谢谢你的帮助。
浏览 21提问于2020-12-13得票数 0
回答已采纳
我在vue.js中很难理解这个概念。 我假设Vue中的组件是一个具有某种(html)表示和内部数据或状态的实体。然后，组件可以根据用户与模板的交互来更改其内部数据，并通过事件通知“外部世界”其内部更改。 但是，为了将组件作为一个整体放在应用程序的上下文中，大多数组件需要从“外部世界”接收数据，这将通过props来完成。因此，对于一个有用的组件，它通常不仅需要改变它的内部状态，还需要改变它从外部上下文中获得的一些数据--但属性不能直接改变。内部数据用于组件的内部工作，但组件的真正目的是转换props中的数据。 假设我们有一个组件，它通过props给出了一个表示用户配置文件的对象。组件的作用是让
浏览 12提问于2020-04-13得票数 0
在Vue.js中，我有以下代码(带有类型记录Vue.js 2和类组件)：
toggle(id: string): void {
if (this.selectedIds.has(id)) {
this.selectedIds.delete(id);
} else {
this.selectedIds.add(id);
}
}
和
get handledUsers() {
return this.users.map((user) => ({
...user,
selected: this.selectedI
浏览 2提问于2021-12-27得票数 1
我正在用vue.js制作一个todo应用程序，它有一个组件TodoItem
<template>
<div class="todo-item" v-bind:class="{'is-completed':todo.completed}">
<p>
<input type="checkbox" @change="markCompleted" />
{{todo.task}}
<button class="de
浏览 7提问于2020-09-01得票数 15
回答已采纳
在Vue.js中，当某些数据发生更改时，组件确实会重新呈现(更新)。有时重新渲染的频率太高了，我想找出哪些数据的更改导致了这种重新渲染。如何找出导致重新渲染的更改数据？
浏览 2提问于2018-05-29得票数 7
我需要将数据从子组件发送到其父组件(通过发出)，一旦子组件被加载，而不调用任何事件，如click或keyUp，...
换句话说，我希望在挂载子组件后，它会自动向父组件发送一些数据，而不必调用事件来发出数据。
在vue.js中有什么方法可以做到这一点吗？
我会提前谢谢你的
浏览 1提问于2021-04-29得票数 0
似乎我在vue中加载外部umd组件时遇到了问题。
我尝试做一些类似的事情，比如
这对使用vue2和webpack的我来说很有效
现在我使用的是Vue3/Vite和上面问题中相同的源码。
但是当解析外部组件promise时，我得到以下错误：
vue.js:1184 [Vue warn]: Unhandled error during execution of async component loader
at <AsyncComponentWrapper>
at <DemoComponent>
at <HelloWorld msg="He
浏览 5提问于2020-12-30得票数 2
3回答
各位！最近，我正在做一个Vue.js项目，我想尽可能地把它分成几个小的组件。有一个组件可以呈现来自父组件的列表，我想要更改一些来自props的操作的属性。此时，我只是好奇props变量在Vue.js组件中是否是可变的。
为了更好地理解，下面是一个示例代码：
<template>
<div>
<div
class="d-flex align-items-center mb-2 justify-between"
v-for="(option, index) in optio
浏览 4提问于2021-09-17得票数 0
1回答
我目前正在为我的一个项目与Vue.js合作。我使用的是组件系统，我并不需要有两个子组件(共享同一个父组件)来相互通信的能力。
在这种特殊情况下，我基本上只需要让其中一个孩子读另一个孩子中的一个变量。
我在寻找一种很好的，干净的方法来实现这一点。如有任何建议，将不胜感激。
可能会用到这个。父母，孩子……等等，如果可能的话，我想找一种更干净的方法。
浏览 2提问于2015-08-06得票数 2
回答已采纳
1回答
VueJS警告避免直接更改道具
、、、、
当我尝试使用@click指令更改某个属性的值时，会收到此警告：
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name"
我的代码如下：
<html>
<head>
<ti
浏览 1提问于2018-09-02得票数 0
我是vue.js的新手。我有一个要求，开发一个经典ASP项目的日程安排功能的日历。我做了一些研究，在使用vue.js开发的GitHub上找到了以下项目。
我可以使用这个项目将该功能作为一个单独的应用程序来实现。但是我需要将这个插入到经典的ASP项目中，因为没有API可以单独开发。
我花了很多时间来寻找如何实现这一点，但找不到一个简单的指南。任何帮助都将不胜感激。谢谢。
浏览 1提问于2018-10-04得票数 0
1回答
我已经使用Vue.js几个月了，它一直在提醒webforms范例，您使用组件来创建一个网站或was应用程序，但是对于Vue.js来说，创建这样的东西是一种乐趣，而不是整个webforms的噩梦。
好吧，我的问题是，是否有可能在标记方式上仅仅为它的父级定义一些行为就制作嵌套组件。示例：
<grid prop1="somevalue" prop2="somevalue">
<grid-column prop1="somevalue" prop2="somevalue">
<filter-opt
浏览 1提问于2017-10-10得票数 1
回答已采纳
2回答
我有一个容器组件，它处理所有的业务逻辑、ajax、数据等。
它有子组件，他将数据和方法作为道具传递。
因此，对于这个问题，有一个"CommentForm“组件，它在提交时获得一个作为函数调用的支柱。
现在，当子组件使用数据调用该方法时，所有操作都很好，但是现在我有两个选项：
数据很好，所以组件的输入是清晰的。
数据糟糕，显示错误
第二个选择很容易..。
但是首先，我如何告诉子组件清除它的内容，我是否需要为它创建另一个道具，还是另一个好方法？
**这段代码是我的代码在Vue.js中的一个例子，但这是一个类似于react的一般性问题
let Vue = require(
浏览 6提问于2016-09-15得票数 1
在vue.js上下文中，getElementsByClassName是如何工作的？
下面有下面的代码片段--目标是单击一个按钮并使用h1方法将vue.js标记的颜色更改为绿色：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
&
浏览 0提问于2018-11-06得票数 4
回答已采纳
我是Vue.js的新手，我正在尝试在代码中实现类似于行为的导航。我这里有一个简单的服务器列表，我希望“选定的服务器”有一个不同的背景颜色，这样它就可以看到所选的内容。我的问题是，我编码的方式是，在我选择了不同的服务器后，active属性仍然存在。我希望它所做的是，一旦我选择了不同的服务器，它将从之前选择的活动类中删除。 <template>
<li
class="list-group-item"
style="cursor: pointer"
@click="serverSelected"
浏览 31提问于2019-10-05得票数 0
我使用vue-table来显示一些表格数据。我试图扩展vue-table，使某些列中的单元格可编辑。因此，我创建了一个名为“可编辑单元格”的vuejs子组件，它能够编辑单元格内容。此子组件作为可编辑列的vue-table模板插入。
这些是我的vue-table选项：
headings: {
title: 'Title',
description: 'Description',
createdBy: 'Created By',
createdAt:
浏览 1提问于2016-07-15得票数 1
我有三个vue.js文件。其中父文件(parent.vue)包含profile:[]的数据
配置文件的数据使用props方法发送到子文件(child.vue)。
child.vue也有它自己子文件(grandchild.vue)，这些子文件通过使用props与profile数据一起传递。
孙子将向API发送put请求，以更改配置文件中的某些数据。
我的问题是。如何确保props将在配置文件数据中所做的每一次更改中更新。
信息：(parent.vue =主文件，child.vue =抽屉(来自ant设计)，grandchild = popover)
我需要child.vue在孙子节点成功发送pu
浏览 1提问于2019-12-09得票数 0
我想通过VNode对象将一些属性和类分配给子。那就行了。但在我的Vue.js调查中，我没有看到这样的模式在使用，这就是为什么我不认为修改儿童VNode的是个好主意。
但这种方法有时会派上用场--例如，我想将aria-label属性分配给默认时隙中的所有按钮。
参见下面的示例，使用默认有状态组件：
Vue.component('child', {
template: '<div>My role is {{ $attrs.role }}</div>',
})
Vue.component('parent', {
r
浏览 0提问于2019-08-28得票数 12
回答已采纳
如何在不重新加载Vue.js页面的情况下更新多个地方的数据？
这就是我的例子。
当我添加一个新应用程序时，会创建一个新的提醒。如何在页面的不同位置使用这些数据？
重要：所有元素都在不同的组件中。
浏览 2提问于2017-11-16得票数 0
回答已采纳
我已经使用vue.js几个星期了，我想了解如何向子组件中注入来自服务器的对象。
当我尝试使用 inject :'user'向子组件注入对象时，它返回一个空对象。
data() {
return {
user: []
}
},
methods: {
getLoggedUserData() {
axios.get('/api/get-user/' + window.auth.id
).then(response => {
this.user =
浏览 2提问于2021-08-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
