Vue에서 구성 요소를 만드는 방법-JS 튜토리얼-php.cn

Vue에서 구성 요소를 만드는 방법

亚连

풀어 주다： 2018-06-05 09:45:41

원래의

2409명이 탐색했습니다.

Vue에서 컴포넌트를 생성하는 방법은 무엇입니까? 아래에서는 Vue에서 구성 요소를 생성하는 두 가지 방법에 대한 요약을 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

컴포넌트 생성 두 가지 방법 요약

1. 글로벌 등록

2. 로컬 등록

var child=Vue.extend({})
var parent=Vue.extend({})

로그인 후 복사

Vue.extend() 메소드가 생성자를 생성하고 생성합니다. 하위 클래스

기본 Vue 생성자를 사용하여 "하위 클래스"를 만듭니다.

이렇게 글을 쓰다보니 너무 지루하네요. 그래서 vue가 단순화되었습니다

Vue.comComponent()를 사용하여 컴포넌트를 직접 생성하고 등록합니다.

Vue.comComponent(id,options) 전역 메소드는 전역 컴포넌트를 등록하는 데 사용됩니다.

id는 문자열 유형이며 이름입니다. 등록된 컴포넌트

options는 객체입니다.

// 全局注册，my-component1是标签名称
Vue.component(&#39;my-component1&#39;,{
 template: &#39;<p>This is the first component!</p>&#39;
})
var vm1 = new Vue({
 el: &#39;#app1&#39;
})

로그인 후 복사

Vue.comComponent()의 첫 번째 매개변수는 라벨 이름이고 두 번째 매개변수는 옵션 객체의 템플릿 속성을 사용합니다. 구성 요소 템플릿을 정의합니다.

이 방법을 사용하면 Vue는 뒤에서 자동으로 Vue.extend()를 호출합니다.

옵션 개체의 구성 요소 속성에서 로컬 등록 구현:

var vm2 = new Vue({
 el: &#39;#app2&#39;,
 components: {
  // 局部注册，my-component2是标签名称
  &#39;my-component2&#39;: {
   template: &#39;<p>This is the second component!</p>&#39;
  },
  // 局部注册，my-component3是标签名称
  &#39;my-component3&#39;: {
   template: &#39;<p>This is the third component!</p>&#39;
  }
 }
})

로그인 후 복사

==로컬 등록은 옵션 개체에서 생성됩니다==

참고: 이는 구성 요소이며 여러 구성 요소를 다음에서 정의할 수 있습니다. 그것 .

간략하게 작성하면 이렇습니다

<body>
 <p id=&#39;box&#39;>  
  <parent>  
  </parent>
 </p>
 <script src=&#39;js/vue.js&#39;></script>
 <script>
  Vue.component(&#39;parent&#39;,{
   template:`<p><h1>我是父组件</h1><child></child></p>`,
    components:{
    &#39;child&#39;:{
     template:`<h1>我是子组件</h1>`
    }
   }
  })
  new Vue({
   el:&#39;#box&#39;
  })
 </script>
</body>

로그인 후 복사

부모컴포넌트를 등록합니다. 그런 다음 상위 구성 요소의 옵션 개체에 하위 하위 구성 요소를 등록합니다. 상위 구성요소의 템플릿에 하위 구성요소의 태그를 작성합니다.

페이지의 스타일 구조는

<p>
 <h1>我是父组件</h1>
 <h1>我是子组件</h1>
</p>

로그인 후 복사

입니다. 참고: 로컬로 등록된 하위 구성 요소는 단독으로 직접 사용할 수 없습니다!

태그가 p에 걸리면 오류가 발생합니다

<p id=&#39;box&#39;>  
 <child></child>
</p>

로그인 후 복사

위 내용은 제가 모두를 위해 정리한 내용이므로 앞으로 모든 분들께 도움이 되기를 바랍니다.

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

Vue에서 구성 요소를 만드는 방법