수집되지 않은 참조 오류: 버스가 정의되지 않았습니까?(v.1992)

수집되지 않은 참조 오류: 버스가 정의되지 않았습니까?(v.1992)

다음 튜토리얼을 따릅니다.https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

컴포넌트에서 다른 컴포넌트로 데이터를 전달하기 위해서

아래 사례를 참조하십시오.나는 그렇게 노력한다.

제 견해는 이렇습니다.

<div class="row">
    <div class="col-md-3">
        <search-filter-view ...></search-filter-view>
    </div>
    <div class="col-md-9">
        <search-result-view ...></search-result-view>
    </div>
</div>

search-filter-view 컴포넌트는 다음과 같습니다.

<script>
    export default{
        props:[...],
        data(){
            return{
                ...
            }
        },
        methods:{
            filterBySort: function (sort){
                bus.$emit('sort-param', sort)
                this.sort = sort
                ...
            }
        }
    }
</script>

search-result-view 컴포넌트는 다음과 같습니다.

<script>
    export default {
        props:[...],
        data() {
            return {
                ...
            }
        },

        methods: {
            getVueItems: function(page) {
                bus.$on('sort-param', function (sort) {
                    console.log(sort);
                })
                ...
            }
        }
    }
</script>

덧붙이자면var bus = new Vue();\sys\assets\sys\app.sys\sys\sys\syslogs로

어디서든 액세스 할 수 있습니다.

getVueItems 메서드(컴포넌트 2)에 대한 정렬 파라미터(filterBySort 메서드, 컴포넌트 1)의 값을 표시하고 싶다.

실행 시 다음과 같은 콘솔 존재 오류가 발생합니다.

수집되지 않은 참조 오류: 버스가 정의되지 않았습니다.

어떻게 하면 오류를 해결할 수 있을까요?

에서 가변 버스를 내보내야 합니다.App.vue필요한 곳에 Import 할 수 있습니다.

제가 개인적으로 하는 일은 전용 파일 bus.js를 만드는 것입니다.

import Vue from 'vue'
export default new Vue()

필요에 따라서, 다음과 같이 Import 합니다.

import bus from 'path/of/bus'
<script>
    export default{
        props:[...],
        data(){
            return{
                ...
            }
        },
        methods:{
            filterBySort: function (sort){
                bus.$emit('sort-param', sort)
                this.sort = sort
                ...
            }
        }
    }
</script>

변수를 정의하는 코드를 확인해야 합니다.var bus = new Vue();는 이 변수를 사용하는 코드보다 먼저 실행됩니다.

또한 버스 변수를 사용하는 코드로 버스 변수에 액세스할 수 있는지 확인하십시오.

언급URL : https://stackoverflow.com/questions/42288327/how-to-solve-uncaught-referenceerror-bus-is-not-defined-vue-js-2