Vue 글로벌 및 로컬 구성 요소를 사용하는 방법

이번에는 Vue 글로벌 및 로컬 컴포넌트를 사용하는 방법과 Vue 글로벌 및 로컬 컴포넌트를 사용할 때주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

main.js항목 파일의 일부 일반적인 구성, 항목 파일에 정의된 public.vue는 전역 구성 요소이며 여기에 사용된 pug 템플릿 .wrapper는

—main.jsFile

**main.js入口文件的内容** import Vue from 'vue' import App from './App' import router from './router' // 引入公用组件的vue文件 他暴漏的是一个对象 import cpublic from './components/public' Vue.config.productionTip = false // 注册全局组件-要在vue的根事咧之前 // 参数 1是标签名字-string 2是对象 引入外部vue文件就相当与一个对象 Vue.component('public', cpublic) // 正常注册全局组件的时候，第二个参数应该是对象。 Vue.component('public1', { template: '
正常的组件模式
' }) /* eslint-disable no-new */ // 生成vue 的根实例;创建每个组件都会生成一个vue的事咧 new Vue({ el: '#app', router, template: '', components: { App } })

—public.vueComponent는 모든 컴포넌트에서 직접 사용할 수 있도록 정의된 전역 컴포넌트로, vue 인스턴스 옵션 컴포넌트에서 다시 정의할 필요가 없습니다. 파일 경로를 다시 가져올 필요도 없습니다.

**public.vue的组件内容**   

parent.vue구성 요소에서는 공용 전역 구성 요소 및 기타 하위 구성 요소가 사용됩니다.

parent.vue 구성 요소

children.vue는 parent.vue의 하위 구성 요소이지만 부모에서만 가능합니다. .vue 범위에서 사용 가능

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue에서 diff 알고리즘을 사용하는 방법

vue 파일 트리 구성 요소를 사용하는 방법

위 내용은 Vue 글로벌 및 로컬 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!