Vue의 주요 연결 유지에 대한 코드 예제 분석
- 不言원래의
- 2018-09-18 14:38:451655검색
이 글의 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.