Vue.js를 사용하여 믹스인을 소품으로 전달하고 하위 컴포넌트에 사용하는 방법

Vue.js를 사용하여 믹스인을 소품으로 전달하고 하위 컴포넌트에 사용하는 방법

부모 컴포넌트가 있으며 부모 컴포넌트에는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부동산?

이 문제를 해결하기 위한 낮은 수준의 방법은 코드를 리팩터링하여 다른 파일에 믹스인을 쓰는 것입니다.그런 다음 두 구성 요소에서 mixin 개체를 가져와 mixin 속성에 할당할 수 있습니다.

언급URL : https://stackoverflow.com/questions/52579432/how-to-pass-mixins-as-props-and-use-them-in-child-components-using-vue-js