Vue.js 구성 요소를 사용하는 방법

이번에는 Vue.js컴포넌트 사용법과 Vue.js 컴포넌트 사용 시 주의사항에 대해 알려드리겠습니다.

　1. 모든 Vue 컴포넌트는 Vue 인스턴스이기도 하며, 글로벌 컴포넌트와 로컬 컴포넌트로 나누어집니다.

2fb1ec095997abb5abb99340125c8b3b
    b98f2d1b8b5d79f8c1b053de334aa7b583153a5025b2246e72401680bb5dd683
    6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c94b3e26ee717c64999d7867364b1b4a3dbe41635306b450881218e857817dde0
    b98f2d1b8b5d79f8c1b053de334aa7b583153a5025b2246e72401680bb5dd683
    8c69b8c7e69a6890c44e58d7de1f3c9c
    6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c94b3e26ee717c64999d7867364b1b4a3a95778579e16b0726f139f43cb421b7b2cacc6d41bbb37262a98f745aa00fbf03f1c4e4b6b16bbbd69b2ee476dc4f83aVue.component('my-component', { //全局组件，建议使用短横线分隔式命名组件  template: 'e388a4556c0f65e1904146cc1a846beeA custom component!94b3e26ee717c64999d7867364b1b4a3'})var Child = {
    template: 'e388a4556c0f65e1904146cc1a846beeA child component!94b3e26ee717c64999d7867364b1b4a3'}var app = new Vue({
    el: '#app',    
    components: { //局部组件，仅可在父作用域#app中使用
    'child-component':Child
    }　　
})var example = new Vue({
    el:'#example'})2cacc6d41bbb37262a98f745aa00fbf0

　

참고:

　a. ff6d136ddc5fdfeffaf53ff6ee95f185, f5d188ed2c074f8b944552db028f98a1, 25edfb22a4f469ecb59f1190150159c6, a34de1251f0d9fe1e645927f19a896e8과 같은 제한된 상위-하위 요소가 있는 요소는 구성 요소 템플릿을 직접 사용할 수 없으며 속성입니다(예: aefc3baf03de7c3c7ca7059834a76d2bfd273fcf5bcad3dfdad3c41bd81ad3e5). 다음 소스 중 하나에서

stringtemplate(내장된 표현식을 허용하는 문자열 리터럴)을 사용하는 경우에는 그러한 제한이 없습니다.

　1) a2bd1692277a5cc8c4139031a969f684을 설정하면 상위 구성요소는 콘텐츠를 기본 슬롯에 배포하거나 Slot="slotName"을 지정할 수 있습니다.

　　2) 하위 구성요소의 슬롯 태그 속성을 얻으려면 상위 구성요소에 Slot-scope="props"를 설정합니다.

　　3) 상위 구성 요소 템플릿의 콘텐츠는 상위 구성 요소 범위에서 컴파일되며 하위 구성 요소 템플릿의 콘텐츠는 하위 구성 요소 범위에서 컴파일됩니다.

　3. 기타

　a. v-bind:is = "comComponentObject"를 통해 구성 요소를 동적으로 전환할 수 있습니다. 잘라낸 구성요소를 캐시하려면 상위 요소 7c9485ff8c3cba5ae9343ed63c2dc3f7를 추가하세요.

　 b. 자식 컴포넌트에 ref="xx"를 설정하면 자식 컴포넌트는 child = vm.$refs.xx로 동작 가능합니다. -- 응급조치일 뿐입니다.

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

추천 자료:

JavaScript 문자열 사용 방법

WeChat 애플릿에서 양방향 데이터 바인딩을 구현하는 방법

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