小编Erf*_*fan的帖子

我有一个父组件和一个子组件.

父组件的模板使用一个槽,以便父组件中可以包含一个或多个子组件.

子组件包含一个称为"信号"的道具.

我希望能够在父组件中更改名为"parentVal"的数据,以便使用父级的值更新子级的信号prop.

这似乎应该是简单的东西,但我无法弄清楚如何使用插槽来执行此操作:以下是一个运行示例:

const MyParent = Vue.component('my-parent', {
  template: `<div>
               <h3>Parent's Children:</h3>
               <slot :signal="parentVal"></slot>
             </div>`,

  data: function() {
    return {
      parentVal: 'value of parent'
    }
  }
});

const MyChild = Vue.component('my-child', {
  template: '<h3>Showing child {{signal}}</h3>',
  props: ['signal']
});

new Vue({
  el: '#app',
  components: {
    MyParent,
    MyChild
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-parent>
    <my-child></my-child>
    <my-child></my-child>
  </my-parent>
</div>

我试图弄清楚如何将在 nextjs 13 应用程序的服务器端声明的变量传递到我在组件文件之一中声明的客户端函数。正如您在我的代码中看到的，我试图将“x”变量传递到 Props 函数中，该函数是客户端组件的一部分。我正在尝试控制台记录传递到 Props 函数的变量，以查看变量是否正确传递。但它返回为“未定义”。有人可以向我解释如何传递这个变量吗？注意：我知道在当前示例中，我的组件不必位于客户端。我只是提供此代码作为示例来回答我的问题。

服务器端代码：

import Props from "./Components/props"

export default function Home() {
  const x = 'hello'

  return (
    <main>
      <Props data = {x} />
      <p>Hello</p>
    </main>
  )
}

客户端代码：

"use client"

export default function Props({ data }) {
    console.log(data);

    return (
        <p>Test</p>
      );
    };

错误：

error - SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)