我有一个带有组件的页面,该页面需要访问该组件中的变量。如果它是React式的,那就太好了。然后我需要从该页面激活组件中的函数。如果它可以在没有React式变量的情况下完成,那就太好了。我的问题是1:从父节点激活该功能的最佳方式是什么,例如,当我单击某个按钮并按2:这对我来说是非常不直观和随机的,它们不可能在两个方向上都是可能的,有人可能知道Vue建议你怎么做吗,相对于我试图做的相对简单的事情,这整件事看起来如此复杂。我想我试着使用 prop ?或者裁判是一个更好的选择?
nhaq1z211#
所以一般来说:如果你需要dom元素,那就是refs的全部用途,因为你没有提到你需要dom元素,所以你不需要在这里使用它。有3种沟通方式:通过 prop 从父到子:https://vuejs.org/guide/components/props.html通过事件https://vuejs.org/guide/components/events.html从子节点到父节点任何人通过事件总线与任何人通信,这需要vue3中的额外库,超出了您的问题www.example.com的范围https://v3-migration.vuejs.org/breaking-changes/events-api.html#event-bus如果你想在值改变时执行组件中的函数,你可以在prop上放置一个观察器。相反,从子到父,你只需要创建一个监听器到你发出的事件,然后调用你选择的函数。在我看来,文档中有很好的例子。
j0pj023g2#
根据我的理解,您希望从Parent组件触发子组件方法,而不传递任何prop作为输入参数,并以相同的方式访问父组件中的子组件数据,而不传递$emit。如果是,您可以简单地使用$refs实现这一点。您可以将ref附加到子组件,然后在$refs的帮助下访问其变量和方法。实时演示(仅用于演示目的,我使用Vue 2,您可以根据Vue 3进行更改):
Parent
$emit
$refs
ref
Vue.component('child', { data: { childVar: '' }, methods: { triggerEventInChildFromParent() { console.log('Child Function triggered from Parent'); } }, mounted() { this.childVar = 'Child component variable' } }); var app = new Vue({ el: '#app', methods: { triggerEventInChild() { this.$refs.child.triggerEventInChildFromParent() } }, mounted() { console.log(this.$refs.child.childVar) } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="triggerEventInChild"> Button in Parent </button> <child ref="child"></child> </div>
2条答案
按热度按时间nhaq1z211#
所以一般来说:如果你需要dom元素,那就是refs的全部用途,因为你没有提到你需要dom元素,所以你不需要在这里使用它。
有3种沟通方式:通过 prop 从父到子:https://vuejs.org/guide/components/props.html
通过事件https://vuejs.org/guide/components/events.html从子节点到父节点
任何人通过事件总线与任何人通信,这需要vue3中的额外库,超出了您的问题www.example.com的范围https://v3-migration.vuejs.org/breaking-changes/events-api.html#event-bus
如果你想在值改变时执行组件中的函数,你可以在prop上放置一个观察器。相反,从子到父,你只需要创建一个监听器到你发出的事件,然后调用你选择的函数。在我看来,文档中有很好的例子。
j0pj023g2#
根据我的理解,您希望从
Parent
组件触发子组件方法,而不传递任何prop作为输入参数,并以相同的方式访问父组件中的子组件数据,而不传递$emit
。如果是,您可以简单地使用$refs
实现这一点。您可以将
ref
附加到子组件,然后在$refs
的帮助下访问其变量和方法。实时演示(仅用于演示目的,我使用Vue 2,您可以根据Vue 3进行更改):