CDN을 통해 Vue를 도입하고 다양한 페이지에서 가치 이전을 실현하는 방법

웹 개발에서 컴포넌트 프레임워크의 인기로 인해 프런트 엔드 페이지를 보다 효율적으로 개발하고 코드를 더 잘 유지 관리할 수 있습니다. 최고 중 하나인 Vue는 점점 더 많은 프런트 엔드 개발자가 사용하고 있습니다. Vue를 사용할 때 일반적으로 서로 다른 페이지 간에 데이터를 전송해야 합니다. 이 기사에서는 CDN을 통해 Vue를 소개하고 서로 다른 페이지 간의 데이터 전송을 구현하는 방법을 소개합니다.

1. 서로 다른 페이지 간 값 전달

Vue 프레임워크를 개발할 때 서로 다른 페이지 간에 데이터를 전송해야 하는 경우가 많습니다. 예를 들어 1페이지에 일부 정보를 입력하고 2페이지에서 사용해야 합니다. 데이터. 이를 위해서는 Vue에서 페이지 간 데이터 전송을 구현해야 합니다.

데이터를 전송하는 과정에서 Vuex, localStorage, sessionStorage 등을 사용할 수 있습니다. 하지만 CDN을 사용할 경우 Vuex는 관련 라이브러리 파일을 다운로드해야 하며, localStorage와 sessionStorage는 문자열 형식의 저장만 지원합니다. 그리고 localStorage나 sessionStorage를 사용할 때 데이터를 직렬화 및 역직렬화해야 하는데, 이는 번거로울 뿐만 아니라 성능도 저하시킵니다. 따라서 본 글에서는 다른 라이브러리 파일을 다운로드 받을 필요 없이 다양한 데이터 형태를 저장할 수 있는 방법을 소개하고자 한다.

2. 창 개체 사용

CDN이 Vue를 도입하면 창 개체를 사용하여 여러 페이지 간에 데이터를 전송할 수 있습니다. Vue 프레임워크에서는 Vue 프로토타입 객체를 통해 전역 변수를 정의할 수 있습니다.

Vue.prototype.$global = {}

위 코드에서 볼 수 있듯이 $global 변수는 Vue 프로토타입 객체에 정의됩니다. 이 변수는 모든 구성 요소에서 사용할 수 있으며 이 변수의 값은 브라우저가 닫힐 때까지 메모리에 유지됩니다.

다음으로, window 객체를 통해 이 변수에 접근하고 여기에 값을 할당할 수 있습니다:

window.$global = { count: 0 }

위 코드를 사용하여 window 객체에 $global이라는 변수를 정의합니다. 전역 변수에 {count: 0} 값을 할당합니다.

이 변수를 다른 페이지에 전달해야 하는 경우 창 개체를 통해 해당 값을 가져오고 수정할 수 있습니다. 예를 들어, 1페이지의 구성 요소에 있는 변수 값에 1을 더하고 이 변수 ​​값을 2페이지의 구성 요소에 전달합니다.

//페이지 1
Vue.comComponent('comComponent1', {
템플릿: <button @click="addCount">{{ count }}</button>,<button @click="addCount">{{ count }}</button>,
 data() {

return {
  count: window.$global.count
}

},
 methods: {

addCount() {
  window.$global.count++
}

}
})

//页面2
Vue.component('component2', {
 template: <span>{{ count }}</span> 데이터 () {

return {
  count: window.$global.count
}

메소드: {
rrreee

})

//2페이지

템플릿: <span>{{ 개수 }} </span>,

rrreee

위 내용은 CDN을 통해 Vue를 도입하고 다양한 페이지에서 가치 이전을 실현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!