itsource

Vue에서 구성 요소가 생성되었을 때 기능을 구현하는 방법은 무엇입니까?

mycopycode 2022. 8. 16. 23:37
반응형

Vue에서 구성 요소가 생성되었을 때 기능을 구현하는 방법은 무엇입니까?

문서에 따르면 Vue 객체의 생성자는 다음과 같이 관리된다.

var vm = new Vue({
  created: function () { console.log("I'm created!"); }
});

그러나 Vue 컴포넌트가 생성되었을 때 대응하는 방법을 알 수 없습니다.다음을 시도했지만 콘솔에 인쇄가 되지 않습니다.

export default {
  created: function() { console.log("Component created!"); }
}

렌더링 중인 컴포넌트를 구독/청취할 수 있습니까?그 이벤트에 대응하여 데이터를 다운로드하여 스토어에 넣어 컴포넌트가 가지고 있는 테이블에 정보를 표시하도록 하고 싶습니다.

어플리케이션에서 사용하는 경향이 있습니다.mounted컴포넌트가 마운트되면 Ajax 데이터를 로드합니다.

내 앱의 코드 예:

Vue.component('book-class', {
    template: '#booking-template',
    props: ['teacherid'],
    data: function () {
        return{
            // few data items returned here..
            message: ''
        }
    },
    methods: {
        // Few methods here..
    },
    computed: {
      // few computed methods here...
    },
    mounted: function () {


        var that = this;
        $.ajax({
            type: 'GET',
            url: '/classinfo/' + this.teacherid,
            success: function (data) {
                console.log(JSON.stringify(data));

            }
        })
    }
});


new Vue({
    el: '#mainapp',
    data: {
        message: 'some message here..'
    }
});

단, created() 훅도 라이프 사이클과 마찬가지로 사용할 수 있습니다.

Vue2에는 다음과 같은 라이프 사이클 후크가 있습니다.

여기에 이미지 설명 입력

컴포넌트에는 앱과 같은 라이프 사이클 훅이 없지만 비슷한 점이 있습니다.문제를 해결했습니다.https://vuejs.org/v2/api/ #http://https://vuejs.org/v2/api/

언급URL : https://stackoverflow.com/questions/41065194/how-to-implement-a-function-when-a-component-is-created-in-vue

반응형