vue.prototype을 사용하는 방법

vue.prototype 사용 방법: 프로토타입에 정의하여 각 Vue 인스턴스에서 사용할 수 있도록 합니다. 코드는 [Vue.prototype.$appName = 'My App']이며 콘솔에 My App이 인쇄됩니다.

이 튜토리얼의 운영 환경: windows10 시스템, vue2.5.2, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【추천 관련 글: vue.js】

vue.prototype 사용법:

vue 프로젝트 main.js 파일에서:

Vue.prototype.$appName = 'My App'

이렇게 하면 프로토타입에 정의하여 작동하게 할 수 있습니다. Vue의 모든 인스턴스에서 사용 가능합니다.

new Vue({
  beforeCreate: function () {
    console.log(this.$appName)
  }
})

콘솔에서 My App이 인쇄됩니다. 그것은 간단합니다!

"appName이 $로 시작하는 이유는 무엇입니까? 중요합니까? 어떻게 되나요?" $ 开头？这很重要吗？它会怎样？”

$是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。

比如写成：

Vue.prototype.appName = 'My App'

在vue实例中：

new Vue({
  data: {
    appName: 'The name of some other app'
  },
  beforeCreate: function () {
    console.log(this.appName)
  },
  created: function () {
    console.log(this.appName)
  }
})

日志中会先出现 "My App"，然后出现 "The name of some other app"，因为 this.appName 在实例被创建之后被 data 覆写了。我们通过 $ 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 $_appName或 ΩappName

$는 Vue 계약의 모든 인스턴스에서 사용할 수 있는 간단한 속성입니다. . 이렇게 하면 정의된 데이터, 메서드 및 계산된 속성과의 충돌을 피할 수 있습니다.

예를 들어 다음과 같이 작성하세요. rrreeevue 인스턴스에서:

rrreee

"내 앱"이 로그에 먼저 표시된 다음 "다른 앱의 이름"이 표시됩니다. 왜냐하면 this.appName이 데이터로 덮어쓰기되기 때문입니다. 인스턴스가 생성된 후. $를 통해 인스턴스 속성의 범위를 설정하면 이러한 일이 발생하지 않습니다. 원하는 경우 $_appName 또는 ΩappName과 같은 고유한 규칙을 사용하여 플러그인 또는 향후 플러그인과의 충돌을 피할 수도 있습니다. 🎜🎜🎜관련 무료 학습 권장 사항: 🎜JavaScript🎜(동영상) 🎜🎜

위 내용은 vue.prototype을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!