如何使用 Vue.js 将 mixins 作为 props 传递并在子组件中使用它们

Question

我有一个父组件，其中包含两个名为add和 的子组件edit，这些组件有一些共同的属性，我想使用mixins，为此我添加一个名为mix父级数据对象的对象，并将其传递props给子组件，如下所示

父组件：

  <template>
      <div id="app">
       <add :mixin="mix" operation="add"></add>
        ...
        <edit :mixin="mix"  operation="edit"></edit>
     </div>
  </template>  

  <script>
   export default {
        name: "App",
       data(){
          return{
          /****/
            mix:{
              data() {
                  return {
                     user: { name: "", email: "" },
                     users: []
                };
              },
              methods: {
                add() {
                   this.users.push(this.user);
                     },

                    }
                  }
                }
           /*****/
               };
              },
     components: {
         add,edit
    }
     };
   </script>

我可以mix在我的子组件中接收该对象 ( )，但如何将其分配给该mixins属性？

Answer 1

解决这个问题的一种简单方法就是重构代码并将 mixin 写入单独的文件中。然后，您可以在两个组件中导入 mixin 对象并将其分配给 mixins 属性。