Question

我正在尝试在我们的Vue应用程序中使用slot-scope功能（旧语法v2.5.x）：https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots-with-the-slot-scope-Attribute，但这是行不通的。

这是我的子组件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: {
    msg: String
  },
  data() {
    return {
      foo: "bar"
    };
  }
};
</script>

我尝试在主要组件中使用以下方法：

<template>
  <div id="app">
    <ChildComponent msg="Hello Vue in CodeSandbox!">
      <ul slot-scope="props">
        <li>foo: {{props.foo}}</li>
        <li>msg: {{props.msg}}</li>
      </ul>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from "./components/ChildComponent";

export default {
  name: "App",
  components: {
    ChildComponent
  }
};
</script>

以下是指向codeandbox示例的链接：https://codesandbox.io/s/vue-template-lg8r3

我在做什么错？谢谢！

Answer 1

您正在混合普通插槽和作用域插槽。

假设您要使用范围限定的广告位，则需要更改以下内容：

data:
  kubernetes.yml: |-
    - type: log
      paths:
        - /var/lib/docker/containers/*/*.log
      json.message_key: log
      json.keys_under_root: true

      multiline.pattern: '^[0-9]{4}-[0-9]{2}-[0-9]{2}'
      multiline.negate: true
      multiline.match: 'after'
      scan_frequency: 20s
      processors:
        - add_kubernetes_metadata:
            in_cluster: true
            namespace: ${POD_NAMESPACE}
            include_annotations:
              - "build"
              - "branch-name"
        - drop_event.when:
            or:
              - equals:
                  property: "mycontaininerproperty"
              - equals:
                  label: "mycontainerlabel"

对此：

<slot></slot>

它们不会自动通过。

如何在vuejs 2.5.x中正确使用插槽范围？

1 个答案: