이번에는 Vue.js컴포넌트 사용법과 Vue.js 컴포넌트 사용 시 주의사항에 대해 알려드리겠습니다.
1. 모든 Vue 컴포넌트는 Vue 인스턴스이기도 하며, 글로벌 컴포넌트와 로컬 컴포넌트로 나누어집니다.<p id="app"> <my-component></my-component> <child-component></child-component></p><p id="example"> <my-component></my-component> <!--在#app内局部注册的组件在此无法被渲染 --> <child-component></child-component></p><script src="https://cdn.jsdelivr.net/npm/vue"></script><script>Vue.component('my-component', { //全局组件,建议使用短横线分隔式命名组件 template: '<p>A custom component!</p>'})var Child = { template: '<p>A child component!</p>'}var app = new Vue({ el: '#app', components: { //局部组件,仅可在父作用域#app中使用 'child-component':Child } })var example = new Vue({ el:'#example'})</script>
참고:
a.