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

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 属性.

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

How to pass mixins as props and use them in child components using Vue.js

mixins

vue.js

vuejs2