原生js，const { userData } = this.$parent; 父组件传值给子组件

原生JavaScript中，`const { userData } = this.$parent;` 这段代码是在使用了Vue.js框架的情况下。在Vue组件体系中，`this.$parent`是一个特殊的属性，它指向当前组件的直接父组件实例。通过解构赋值，`userData`是从父组件中获取的一个名为`userData`的数据属性。

当父组件需要向子组件传递数据时，通常会将数据作为props（属性）的方式定义在父组件中，并在子组件的data选项或props中接收。然后，父组件可以在适当的时候将`userData`设置为想要传递的值，比如：

// 父组件
export default {
  data() {
    return {
      userData: {/* 子组件需要的数据 */}
    }
  },
  methods: {
    passDataToChild() {
      this.$children.forEach(child => child.userData = this.userData);
    }
  }
}

// 子组件
import ParentComponent from './ParentComponent.vue';
export default {
  props: ['userData']
}

在这个例子中，当父组件调用`passDataToChild()`方法时，`userData`就会从父组件传递到所有子组件的`userData` prop上。

相关问题

onClick(event) { this.$emit('click', event.detail); this.jumpLink(); }, updateStyle() { if (this.parent == null) { return; } const { children = [] } = this.parent; const { length } = children; const index = children.indexOf(this); this.setData({ isFirst: index === 0, isLast: index === length - 1, }); }, }, });

这是一个 Vue.js 组件的代码，其中包含了两个方法：`onClick` 和 `updateStyle`。

`onClick` 方法中，当组件被点击时，它将通过 `$emit` 方法触发 `click` 事件并将事件的详细信息传递给父组件，然后调用 `jumpLink` 方法。

`updateStyle` 方法中，它会检查当前组件是否有父组件，并获取父组件的子组件列表，然后根据当前组件在子组件列表中的位置，判断它是否为第一个或者最后一个子组件，并将结果保存到组件的数据中。

这些方法可以用于使组件在点击和样式更新时具有一定的交互性。

$bus.$emit父子之间传值

你可以使用 Vue 的事件总线 `$bus`（或者更常见的是 `$emit` 和 `$on`）来在父组件和子组件之间传递值。下面是一个简单的示例：

在父组件中，使用 `$emit` 来触发一个自定义事件，并传递值给子组件：

// 父组件
export default {
  methods: {
    sendDataToChild() {
      const data = '传递给子组件的值';
      this.$bus.$emit('custom-event', data);
    }
  }
}

在子组件中，使用 `$on` 来监听父组件触发的事件，并接收传递的值：

// 子组件
export default {
  created() {
    this.$bus.$on('custom-event', data => {
      console.log(data); // 输出：传递给子组件的值
    });
  }
}

确保在适当的生命周期钩子函数中使用 `$on`，以便在父组件触发事件后能够正确地接收到值。同时，也要确保在适当的时候使用 `$off` 来取消监听事件，以避免内存泄漏。

希望这个示例对你有帮助！如果还有其他问题，请随时提问。