Vue의 주요 연결 유지에 대한 코드 예제 분석-JS 튜토리얼-php.cn

Vue의 주요 연결 유지에 대한 코드 예제 분석

不言

풀어 주다： 2018-09-18 14:38:45

원래의

1664명이 탐색했습니다.

이 글의 내용은 Vue의 핵심 연결 유지에 대한 코드 샘플 분석입니다. 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되길 바랍니다.

keep-alive key

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
    <p id="app">
        <keep-alive>
            <child-component key="1" v-if="seen" name="1"></child-component>
            <child-component key="2" v-if="!seen" name="2"></child-component>
        </keep-alive>
        <button @click="toggle">toggle</button>
    </p>
    <script type="text/javascript">
        Vue.component('child-component', {
            template: `<input type="text" placeholder="enter">`,
            data() {
                return {}
            },
            props: ["name"],
            mounted() {
                console.log(`${this.name} mounted`)
            }
        })
        const vm = new Vue({
            el: "#app",
            data: {
                seen: true
            },
            methods: {
                toggle() {
                    this.seen = !this.seen;
                }
            }
        })
    </script>
</body>
</html>

로그인 후 복사

key는 더 이상 재사용되지 않는 식별 요소입니다. 키는 Vue에서 예약된 속성이며 소품으로 하위 구성 요소에 전달할 수 없습니다. 그렇지 않으면 콘솔에 Vue 오류가 표시됩니다.

그러나 keep-alive 플래그는 구성 요소 인스턴스를 반복적으로 생성하지 않습니다. 즉, created mounted 이벤트를 한 번만 트리거합니다.

두 가지를 모두 사용하면 보다 세련된 방식으로 구성 요소 재사용을 관리할 수 있습니다

위 내용은 Vue의 주요 연결 유지에 대한 코드 예제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!