vue.js 为什么没有用于子->父的 prop 和用于父->子的$发射?

92vpleto  于 2023-01-31  发布在  Vue.js
关注(0)|答案(2)|浏览(117)

我有一个带有组件的页面,该页面需要访问该组件中的变量。如果它是React式的,那就太好了。然后我需要从该页面激活组件中的函数。如果它可以在没有React式变量的情况下完成,那就太好了。我的问题是1:从父节点激活该功能的最佳方式是什么,例如,当我单击某个按钮并按2:这对我来说是非常不直观和随机的,它们不可能在两个方向上都是可能的,有人可能知道Vue建议你怎么做吗,相对于我试图做的相对简单的事情,这整件事看起来如此复杂。
我想我试着使用 prop ?或者裁判是一个更好的选择?

nhaq1z21

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上放置一个观察器。相反,从子到父,你只需要创建一个监听器到你发出的事件,然后调用你选择的函数。在我看来,文档中有很好的例子。

j0pj023g

j0pj023g2#

根据我的理解,您希望从Parent组件触发子组件方法,而不传递任何prop作为输入参数,并以相同的方式访问父组件中的子组件数据,而不传递$emit。如果是,您可以简单地使用$refs实现这一点。
您可以将ref附加到子组件,然后在$refs的帮助下访问其变量和方法。
实时演示(仅用于演示目的,我使用Vue 2,您可以根据Vue 3进行更改)

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>

相关问题