vue cli에서 mixin을 만들고 가져 오는 방법

비망록입니다.

하고 싶은 것

· vue cli로 mixin을 만들고 component 파일에서 사용하고 싶습니다.

같은 동작을 여러 곳에서 사용하고 싶다면 mixin이 편리합니다. SCSS/SASS에서 사용하는 mixin과 같은 역할입니다.

Step 1: mixin은 js 파일에 씁니다.

mixin은 vu 파일이 아니라 js 파일에 씁니다. 여기서는 myFirstMixin.js라는 파일을 만들었습니다.

보충 : src 폴더 안에 mixin 폴더를 만들고 그 안에 mixin을 쓴 js 파일들을 저장해 두면 관리하기 쉽다고 합니다.

쓰는 방법은 Vue 파일로 만든 컴포넌트의 script 태그 내용과 함께입니다. 여기서 computed를 사용한 mixin을 작성합니다. mixin하고 싶은 내용을 씁니다.

myFirstMixin.js 파일 내

export default {
    computed: {
        filteredBlogs: function(){
            return this.blogs.filter((blog) => {
                return blog.title.match(this.search);
            })
        }
    }
}

Step 2: 컴포넌트 파일로 불러오기

component.vue 파일 내

<script>
import myFirstMixin from '../mixins/myFirstMixin';//ここでインポートする

export default {
  data() {
    return {
        //
    }
  },
  methods: {
  //
  },
mixins: [
    myFirstMixin
]
}//ここで登録する
</script>

이제 사용할 수 있습니다
초보자이므로, 뭔가 오해 · 착각이 있으면, 지적하실 수 있으면 다행입니다