如何将对象作为道具传递给我的 vue 生成的 Web 组件

Question

我的目标是创建一个 Web 组件并在 vue 应用程序中使用它。创建不是问题，使用也不是问题。我没有成功的是将 object 作为 prop 传递给我的 Web 组件。不过，传递布尔值或字符串似乎工作正常。

我的 vue 组件道具：

props:{
    user: {
      type: Object,
      required: true,
      default: function() {
        return {
          name: "Default",
          age: 0,
          mail: "default@mail.com"
        }
      }
    },
    readOnly:{
      type: Boolean,
      default: function(){
        return false
      }
    }
  }

我用vue-cli创建web组件的脚本：

npm run build -- --target wc --inline-vue --name my-web-component

我想在其中使用我的 Web 组件的非常简单的应用程序：

<html>
    <head>
        <meta charset="utf-8">
        <title>my-web-component demo</title>
        <script src="https://unpkg.com/vue"></script>
        <script src="./my-web-component.js"></script>
    </head>
    <body>
        <div id="myapp">
            <my-web-component></my-web-component>
        </div>
    </body>
</html>    
<script>
    new Vue({
        el: "#myapp",
        data: {
            user: {
                name: "John",
                age: 31,
                mail: "john.doe@mail.com"
            }
        }
    })
</script>

我尝试将对象作为 user prop:

1. <my-web-component></my-web-component> //expected

2. <my-web-component v-bind:user="user"></my-web-component> //not expected

3. <my-web-component v-bind:user.prop="user"></my-web-component> //not expected

结果（通过组件挂载钩子内的console.log获得）：

用户 = 默认道具值 { name: "Default", age: 0, mail: "default@mail.com" }
用户=[object Object]
用户 = 默认道具值 { name: "Default", age: 0, mail: "default@mail.com" }

readOnly 属性没有任何问题。

那么，你知道如何将对象作为 prop 传递给我的 vue 生成的 Web 组件吗？

这是 github 回购的 link：https://github.com/Miloo25155/my-web-component.git

构建的web组件在dist文件夹中，还有简单的vue app(dist/demo.html)

感谢您的宝贵时间。

Answer 1

Vue Webcomponent Wrapper 确实将道具传递给您的 Vue 组件，但它只适用于字符串。这就是您在示例 2 中看到 [Object object] 的原因。一个可能的解决方法是在您的组件中为 user 和 JSON.parse 接受一个字符串值（而不是假设 prop 将是一个对象）。

您可能有充分的理由构建组件的独立 Web 组件版本，也许您想将其作为产品交付给用户或客户。如果我是您的网络组件的最终用户，我希望像这样使用它：

<html>
<head>
<script src="my-web-component.js"></script>
</head>
<body>
<my-web-component user="{name: 'joshua'}"></my-web-component>
</body>
</html>

如果我查看您提供的代码示例，我发现您正在尝试在一个小型 Vue 应用程序中使用您的组件的 webcomponent 版本。正如您所经历的和我解释过的那样，这将不起作用，除非您在将其传递给 my-web-component 之前 JSON.stringify 用户。我想你有两个选择可供选择：将组件开发为常规 vue 组件（并在完成后将其导出为独立的 web 组件）或将其视为真正的 web 组件（包括它的局限性，因为你不会得到您习惯于使用常规组件的高水平反应性。

如何将对象作为道具传递给我的 vue 生成的 Web 组件

How to pass an object as a prop to my vue-generated web component

web-component

vue.js

vuejs2

vue-cli