JavaScript 如何从父组件中访问子组件的方法

假设你有两个嵌套的组件，即一个组件嵌套在另一个组件中。你怎样能够从父组件中访问子组件的方法呢?为了从父组件方法中访问子组件方法，你可以使用ref。或者你也可以通过this.$root方法（父组件）访问父元素的后代组件，该方法可以用this.$children数组来访问子组件。同样地，子组件可以通过this.$parent访问其父组件。

Vue.js基本上对此进行了警告，原因如下：

它将父组件和子组件紧密耦合在一起。
子组件可以修改父状态，因此不可靠。

因此，我们还可以使用Vue.js实现的事件接口，允许在组件树上下进行通信。

$on() - 这允许您在要监听事件的Vue实例上声明一个监听器。
$emit() - 这允许您在相同实例上触发事件。

示例

复制并粘贴以下代码片段到您的Vue项目中，然后运行Vue项目。您将在浏览器窗口中看到以下输出。

文件名 – app.js
目录结构 – $project/public - app.js

// Defining the parent and child events
const events = new Vue({}),
parentComponent = new Vue({
   el: '#parent',
   ready() {
      events. $on('eventGreet', () => { this.parentMsg = `Heard the greeting event from Child component$ {++this.counter} times..`;
      });
   },
   data: {
      parentMsg: 'Listening for an event..',
      counter: 0
   }
}),
childComponent = new Vue({
   el: '#child',
   methods: {
      greet: function () {
         events. $emit('eventGreet'); this.childMsg = `Firing the greeting event$ {++this.counter} times..`;
      }
   },
   data: {
      childMsg: 'Ready to fire an event.',
      counter: 0
   }
});

文件名 – index.html
目录结构 — $ project/public — index.html

<!DOCTYPE javascript>
<javascript>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
   <body>
      <div id="parent">
         <h2>Parent Component</h2>
         <p>{{parentMsg}}</p>
      </div>
      <div id="child">
         <h2>Child Component</h2>
         <p>{{childMsg}}</p>
         <button v-on:click="greet">Greet</button>
      </div>
      <script src='app.js'></script>
   </body>
</javascript>

请执行以下命令以获得以下输出结果 −

C://my-project/ > npm run serve

完整的javascript示例

现在让我们将两个文件app.js和index.js组合起来，创建一个新的javascript文件

<!DOCTYPE javascript>
<javascript>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
   <body>
      <div id="parent">
         <h2>Parent Component</h2>
         <p>{{parentMsg}}</p>
      </div>
      <div id="child">
         <h2>Child Component</h2>
         <p>{{childMsg}}</p>
         <button v-on:click="greet">Greet</button>
      </div>
      <script>

         // Defining the parent and child events
         const events = new Vue({}),
         parentComponent = new Vue({
            el: '#parent',
            ready() {
               events. $on('eventGreet', () => { this.parentMsg = `Heard the greeting event from Child component$ {++this.counter} times..`;
               });
            },
            data: {
               parentMsg: 'Listening for an event..',
               counter: 0
            }
         }),
         childComponent = new Vue({
            el: '#child',
            methods: {
               greet: function () {
                  events. $emit('eventGreet'); this.childMsg = `Firing the greeting event$ {++this.counter} times..`;
               }
            },
            data: {
               childMsg: 'Ready to fire an event.',
               counter: 0
            }
         });
      </script>
   </body>
</javascript>

运行上面的程序时，默认的问候事件被触发。点击问候按钮，在子组件中，它会显示“触发问候事件1次”。在本教程中，我们讨论了如何在Vue.js中从父组件访问子方法。