이 글은 vue.js 구성요소의 글로벌 등록과 로컬 등록에 대한 간략한 소개와 예시 분석을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
1. 글로벌 등록 인스턴스(다음은 공식 홈페이지의 예시에 따른 코드입니다.)
<div id="app"> <com-btn></com-btn> <com-btn></com-btn> </div>
<script> Vue.component('com-btn',{ data:function(){ return{ num:0, } }, template:`<button v-on:click='change'>点我{{num}}次</button>`, methods:{ change:function(){ this.num += 1; } } }) var vm = new Vue({ el:'#app', data:{ }, }) </script>
컴포넌트를 등록할 때 com-btn과 같은 이름을 지정해야 함을 알 수 있습니다. 컴포넌트 이름
Vue.component('my-component-name', { /* ... */ })
우리가 등록한 컴포넌트 com-btn의 첫 번째 매개변수입니다. 이 컴포넌트는 등록된 후 새로 생성된 모든 vue 루트 인스턴스(새 Vue)에서 사용할 수 있습니다.
모든 구성 요소가 적용되려면 루트 인스턴스 앞에 작성되어야 한다는 점은 주목할 가치가 있습니다.
2 지역 조상 서적의 예
<script> var childcom ={ data:function(){ return{ num:0, } }, template:`<button v-on:click='change'>点我{{num}}次</button>`, methods:{ change:function(){ this.num += 1; } } } var vm = new Vue({ el:'#app', data:{ }, components:{ 'com-btn':childcom,//调用这个组件 } }) </script>
로컬 등록의 장점은 webpack과 같은 빌드 시스템을 사용할 때 글로벌 등록을 통해 컴포넌트를 등록하면, 특정 컴포넌트를 사용하지 않을 때 최종 빌드 결과에 계속 존재하게 되어 불필요한 js 다운로드가 늘어나게 됩니다.
그러므로 간단한 js 객체를 통해 구성 요소를 등록할 수 있습니다
var ComponentA = { /* ... */ }
이 구성 요소를 사용해야 하는 경우 루트 인스턴스에서 정의된 구성 요소를 호출하기만 하면 됩니다.
new Vue({ el: '#app' components: { 'component-a': ComponentA, 'component-b': ComponentB } })
루트 인스턴스의 속성 이름이 구성 요소라는 점에 주목할 가치가 있습니다. s를 잊지 마세요. 구성 요소의 다른 속성은 인스턴스의 속성과 동일하지만 데이터는 함수여야 합니다.
구성 요소 개체의 각 속성은 사용자 정의 구성 요소의 이름이고 속성 값은 이 구성 요소의 옵션 개체입니다.
부분적으로 등록된 구성 요소는 해당 하위 구성 요소에서 사용할 수 없습니다. 구성 요소 A를 구성 요소 B에서 사용할 수 있도록 하려면 다음과 같이 작성해야 합니다.
var ComponentA = { /* ... */ } var ComponentB = { components: { 'component-a': ComponentA }, // ... }
관련 권장 사항:
vue 전역 등록 및 로컬 등록 사용에 대한 자세한 설명
위 내용은 vue.js 구성 요소의 전역 등록과 로컬 등록에 대한 간략한 소개와 예시 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
