집 > 기사 > 웹 프론트엔드 > Vue에서 구성 요소를 만드는 방법

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

亚连원래의: 2018-06-05 09:45:412421검색

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>

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

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

관련 기사