VueJS 中的父子通信

Posted 2023-02-22

【中文标题】VueJS 中的父子通信

【英文标题】：Parent-child communication in VueJS

【发布时间】：2018-02-10 21:28:03

【问题描述】：

我有两个 Vue 组件。 parent-component：

Vue.component('parent-component',
        methods: 
            test: function()
             alert('Option Selected');
            
        ,
        template: `
            <div><slot></slot></div>
        `
);

还有animals 组件：

Vue.component('animals',
        data: function()
            return 
                selected: ''
            
        ,
        template: `
            <select @change="selectionChanged" v-model="selected">
                <slot></slot>
            </select>
        `,
        methods: 
            selectionChanged: function()
                this.$emit('optionselected', this.selected);
            
        
 );

这是我的 html：

<div id="app">
        <parent-component @optionselected="test()">
            <animals>
                <option>Aardvark</option>
                <option>Bear</option>
                <option>Cat</option>
            </animals>
        </parent-component>
 </div>

我正在尝试将所选选项从子组件 (animals) 获取到父组件 (parent-component)。我正在从子级发出 optionselected 事件，但看起来父组件没有响应该事件，我的意思是根本没有调用 test() 方法。我在这里做错了什么？

这里是JSFiddle Demo

【参考方案1】：

首先，您需要将侦听器添加到模板中的animals 组件中。

<animals @optionselected="test">

其次，重要的是要记住，因为您使用的是 slots，所以 slot 内的元素将在定义它们的组件范围内进行评估。在这种情况下，该范围是 Vue 的范围，而不是 parent-component 范围。为了允许定义在插槽内的元素使用包含的组件数据、方法等，您需要定义一个scoped slot。在这种情况下，你的父组件最终会是这样的：

<div><slot :test="test"></slot></div>

你的 Vue 模板变成了

<parent-component>
  <template scope="test">
    <animals @optionselected="test">
      <option>Aardvark</option>
      <option>Bear</option>
      <option>Cat</option>
    </animals>
  </template>
</parent-component>

这是更新后的代码。

console.clear()
Vue.component('parent-component', 
  methods: 
    test: function(option) 
      alert('Option Selected ' + option);
    
  ,
  template: `
            <div><slot :test="test"></slot></div>
        `
);
Vue.component('animals', 
  data: function() 
    return 
      selected: ''
    
  ,
  template: `
            <select @change="selectionChanged" v-model="selected">
                <slot></slot>
            </select>
        `,
  methods: 
    selectionChanged: function() 
      this.$emit('optionselected', this.selected);
    
  
);
new Vue(
  el: "#app",
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <parent-component>
    <template scope="test">
      <animals @optionselected="test">
        <option>Aardvark</option>
        <option>Bear</option>
        <option>Cat</option>
      </animals>
    </template>
  </parent-component>
</div>

【讨论】：

谢谢。但是我如何接收在事件发射期间从animals 传递到parent-component 的this.selected 属性：this.$emit('optionselected', this.selected);

@Eisenheim 你正在通过它。你只是没有用它做任何事情。我更新了警报以显示所选值。