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

php中世界最好的语言
풀어 주다: 2018-05-11 11:37:04
원래의
2483명이 탐색했습니다.

이번에는 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.
    , ,
  • ,
  • 과 같은 제한된 상위-하위 요소가 있는 요소는 구성 요소 템플릿을 직접 사용할 수 없으며 속성입니다(예: ). 다음 소스 중 하나에서

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

     1)
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿