(Vue.js 3 个选项 API) 如何访问子方法？

Question

我需要使用带有选项 API 的 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 ref="childComponent2Ref" :url="url"></child-component-2>

和

methods: {
  updateChildComponents() {
    this.$refs.childComponent1Ref.childComponentMethod();
    this.$refs.childComponent2Ref.childComponentMethod();
  }
}

这个方法其实访问成功了，但是我觉得这个方法可能不对

其次，我在子组件中使用了一个 prop，我在父组件中更新并在子组件的方法中使用，该方法仅在第二个事件之后更新。我觉得这两个可能有关系。

子组件：

props: ['url'],
methods: {
  childComponentMethod() {
    console.log(this.url); // can access the value from the previous event 
  }
}

感谢任何帮助。

Answer 1

对于parent和children之间的通信，您应该使用道具传递价值。如果 parent 中的值发生变化，您必须添加手表。它调用了一种方式绑定，因为 parent 看不到 child 组件中的更改。

Parent -> child = 使用道具。

Child -> parent = 使用发射和事件。

<script>
import { reactive,watch, computed,onMounted } from "vue";


export default {
  components: { 
  },
  props: { metadata: String },
  emits: [""],
  setup(props) {
    onMounted(async () => {
    //first initilize 
      if (props.metadata) {
        state.metadataName = props.metadata;
      }
    });
    //track after the changes in the parent
    watch(
      () => props.metadata,
      async (metadata) => {
        if (metadata) {
          
        }
      }
    );
    return {
     
    };
  },
};
</script>

(Vue.js 3 个选项 API) 如何访问子方法？

(Vue.js 3 Options API) How do I access a child method?

javascript

vue.js

vue-options-api