처음 본 Vue2.0 구성 요소

1984 단어
Vue.component (구성 요소 이름, 구성 요소 대상) 이 단계를 구성 요소 전역 등록 구성 요소라고 부르면 전체 응용 프로그램에서 이 구성 요소를 사용할 수 있습니다

글로벌 구성 요소 등록


어셈블리를 생성하는 방법:
  • 첫 번째 방식은 전역적으로 하나의 구성 요소를 등록하는 것이다Vue.component( , ). 전역적으로 등록하면 전체 응용 프로그램에서 이 구성 요소를 사용할 수 있다. 사용 방식은 바디
  • var myComponent = Vue.extend({
        template : "

    첫 번째 Vue 구성 요소

    " }); Vue.component("my-component",myComponent);
  • 두 번째 방식: 직접 쓰기, 간소화, 사용 방식도 바디에 라벨을 쓴다
  • vue.component ("my-component2",{
      template :"

    두 번째 Vue 구성 요소

    " })

    이런 방식으로 만든 것은 전역 구성 요소이고, 다음 방식은 국부 구성 요소를 만드는 것이다.서브어셈블리 구성

    로컬 구성 요소 등록

  • 유사methods 구성 항목, 구성 서브어셈블리
  • var vm = new Vue ({
      el : "#box", // 
      data : {
         msg : "this is father's msg", 
       },
      components : {// 
          "my-component3" : {
             template : "

    세 번째 Vue 구성 요소

    ", }, }, })
  • 네 번째 방식: 먼저 템플릿 대상을 성명한다
  • var m4 = {
      template: "

    네 번째 구성 요소

    " }

    Vue 인스턴스의 구성 요소 구성에서 키 값 쌍을 씁니다.
    var vm = new Vue ({
         el : "#box", // 
         data : { 
                },
          components : {
                    "my-component4" : m4,//    4
          }
       })
    

    이상은 네 번째 구성 요소의 성명 방식입니다

    상위 하위 전송 값


    주의: 1. vue의 서브집합은 부모 집합의 속성과 변수에 직접 접근할 수 없습니다. 이것은 하나의 귀속입니다. Vue에서 구성 요소의 역할 영역은 기본적으로 격리되어 있습니다. 만약에 하위 구성 요소가 부모 집합의 데이터에 접근하려면 부모 집합의 디스플레이를 아래로 전달해야 합니다. 어떻게 디스플레이를 아래로 전달합니까?propsprops는 수조 형식으로 속성을 수신할 수도 있고 대상 형식일 수도 있으며 대상 유형도 사용자 정의 검증할 수 있다validator
       

    좋은 웹페이지 즐겨찾기