Vue 전역 구성 요소 및 로컬 구성 요소에 대한 자세한 설명-JS 튜토리얼-php.cn

이 글은 주로 Vue 컴포넌트의 글로벌 컴포넌트와 로컬 컴포넌트의 상세한 사용법을 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

Component는 Vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화할 수 있습니다. 높은 수준에서 구성 요소는 Vue.js 컴파일러가 특별한 기능을 추가하는 사용자 정의 요소입니다. 어떤 경우에는 구성 요소가 is 속성으로 확장된 기본 HTML 요소의 형태를 취할 수도 있습니다. 개인적으로는 재사용이 가능한 구조적 레이어 코드 조각이라고 생각합니다. is特性扩展。个人认为就是一个可以重复利用的结构层代码片段。

全局组件注册方式：Vue.component(组件名,{方法})

eg:

<body>
<p id="app">
<my-component></my-component>
</p>
<p id="app1">
  <my-component></my-component>

</p>
<script>
Vue.component("my-component",{
  template:"<h1>我是全局组件</h1>"
});
new Vue({
  el:"#app"
});
new Vue({
  el:"#app1"
})
</script>
</body>

로그인 후 복사

渲染结果：

<p id="app">
  <h1>我是全局组件</h1>
</p>
<p id="app1">
  <h1>我是全局组件</h1>
</p>

로그인 후 복사

这里需要注意：

1.全局组件必须写在Vue实例创建之前，才在该根元素下面生效；

eg:

<body>
<p id="app">
  <my-component></my-component>
</p>
<p id="app1">
  <my-component></my-component>

</p>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件</h1>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

로그인 후 복사

这样只会渲染app1根元素下面的，并不会渲染app根元素下面的，并且会报错。

2.模板里面第一级只能有一个标签，不能并行；

<body>
<p id="app">
  <my-component></my-component>
</p>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件</h1>" +
    "<p>我是全局组件内标签</p>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

로그인 후 복사

这样子会报错，并且只会渲染第一个标签h1;我们应该这样子写：

<body>
<p id="app">
  <my-component></my-component>
</p>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件<p>" +
    "我是全局组件内标签</p></h1>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

로그인 후 복사

局部组件注册方式，直接在Vue实例里面注册

eg:

<body>
<p id="app1">
  <child-component></child-component>
</p>
<script>
  new Vue({
    el: "#app1",
    components:{
      "child-component":{
        template:"<h1>我是局部组件</h1>"
      }
    }
  });
</script>

로그인 후 복사

局部组件需要注意：

1.属性名为components，s千万别忘了;

2.套路比较深，所以建议模板定义在一个全局变量里，代码看起来容易一点，如下：（模板标签比较多的时候，这样子写更加简洁规整）

<body>
<p id="app1">
  <child-component></child-component>
</p>
<script>
  var child={
    template:"<h1>我是局部组件</h1>"
  };
  new Vue({
    el: "#app1",
    components:{
      "child-component":child
    }
  });
</script>
</body>

로그인 후 복사

关于组件中的其他属性，可以和实例中的一样，但是data属性必须是一个函数：

eg:

<body>
<p id="app1">
  <child-component></child-component>
</p>
<script>
  var child={
    template:"<button @click=&#39;add2&#39;>我是局部组件:{{m2}}</button>",
    data:function(){
      return {m2:1}
    },
    methods:{
      add2:function(){
        this.m2++
      }
    }
  };
  new Vue({
    el: "#app1",
    components:{
      "child-component":child
    }
  })
</script>
</body>

로그인 후 복사

显示结果：

全局组件和局部组件一样，data也必须是一个函数：

<body>
<p id="app1">
  <my-component></my-component>
</p>
<script>
  Vue.component("my-component",{
    template:"<button @click=&#39;add1&#39;>全局组件：{{m1}}</button>",
    data:function(){
      return {
        m1:10
      }
    },
    methods:{
      add1:function(){
        this.m1++
      }
    }
  });
  new Vue({
    el:"#app1"
  })
</script>
</body>

로그인 후 복사

显示结果：

当使用 DOM 作为模板时 (例如，将el选项挂载到一个已存在的元素上)，你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素<ul>，<ol>，<table>，<select>限制了能被它包裹的元素，而一些像<option>这样的元素只能出现在某些其它元素内部。

自定义组件<my-row>被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的is

전역 구성 요소 등록 방법: Vue.comComponent (구성 요소 이름, {method})

eg:

<body>
<p id="app1">
<ul>
  <li is="my-component"></li>
</ul>
</p>
<script>
 Vue.component("my-component",{
   template:"<h1>{{message}}</h1>",
   data:function(){
     return {
       message:"hello world"
     }
   }
 });
 new Vue({
   el:"#app1"
 })
</script>
</body>

로그인 후 복사

렌더링 결과:

<body>
<p id="app1">
<my-component></my-component>
</p>
<script>
 Vue.component("my-component",{
   template:"<button @click=&#39;add3&#39;>" +
   "{{message}}</button>",
   data:function(){
     return {
       message:"hello world"
     }
   },
   methods:{
     add3:function(){
       alert("我是局部")
     }
   }
 });
 new Vue({
   el:"#app1",
   methods:{
     add3:function(){
       alert("我是全局")
     }
   }
 })
</script>
</body>

로그인 후 복사

여기 참고:

1 전역 구성 요소는 Vue 인스턴스가 생성되기 전에 작성되어야 합니다. . 루트 요소 아래에만 적용됩니다.

eg:

<body>
<p id="app1">
<my-component @click="add3"></my-component>
</p>
<script>
 Vue.component("my-component",{
   template:"<button @click=&#39;add3&#39;>" +
   "{{message}}</button>",
   data:function(){
     return {
       message:"hello world"
     }
   }
 });
 new Vue({
   el:"#app1",
   methods:{
     add3:function(){
       alert("我是全局")
     }
   }
 })
</script>
</body>

로그인 후 복사

이는 app1 루트 요소 아래에 있는 요소만 렌더링하고 앱 루트 요소 아래에 있는 요소는 렌더링하지 않으며 오류가 보고됩니다.

2. 템플릿의 첫 번째 수준에는 하나의 태그만 있을 수 있으며 병렬화할 수 없습니다.

<body>
<p id="app1">
  <button @click="f">ES5</button>
  <button @click="f1">ES6</button>
</p>
<script>
new Vue({
  el:"#app1",
  methods:{
    f:function(){
     console.log(this)
    },
    f1:()=>{
      console.log(this)
    }
  }
})
</script>
</body>

로그인 후 복사

이렇게 하면 오류가 보고되고 첫 번째 태그 h1만 다음과 같이 작성해야 합니다.

new Vue({
  el:"#app1",
  data:{that:this},
})

로그인 후 복사

로컬 구성 요소 등록 방법, Vue 인스턴스에 직접 등록

예:

rrreee

부분 구성 요소에 주의해야 할 사항:

1 속성 이름은 구성 요소입니다. ;

2. 루틴이 비교적 깊기 때문에 다음과 같이 템플릿을 전역 변수에 정의하는 것이 더 쉬워 보입니다. (템플릿 태그가 많을 경우 다음과 같이 작성하는 것이 더 간결하고 규칙적입니다. this)

rrreee

구성 요소의 다른 속성은 예제와 동일할 수 있지만 데이터 속성은 함수여야 합니다:

eg:

rrreee

표시 결과:

전역 구성 요소는 로컬 구성 요소와 동일하며 데이터도 함수여야 합니다.

rrreee

표시 결과:

DOM을 다음과 같이 사용하는 경우 템플릿(예: el 옵션을 기존 요소에 마운트), Vue는 브라우저가 HTML을 구문 분석하고 정규화한 후에만 템플릿 콘텐츠를 가져올 수 있기 때문에 HTML에는 몇 가지 제한 사항이 적용됩니다. 특히 <ul>, <ol>, <table>, <select>와 같은 요소 래핑할 수 있는 요소를 제한하며 <option>과 같은 일부 요소는 특정 다른 요소 내부에만 나타날 수 있습니다.

사용자 정의 구성 요소 <my-row>는 잘못된 콘텐츠로 간주되므로 렌더링 시 오류가 발생합니다. 해결 방법은 특수 is 속성을 사용하는 것입니다.


eg:rrreee
렌더링 결과는 다음과 같습니다. 

전역 및 로컬 범위 문제의 경우 다음과 같이 이해할 수 있습니다. 변수가 구성 요소 내부에서 사용되는 한 이러한 변수는 구성 요소 내부에 있어야 하며 외부 HTML 구조에서 참조되는 변수는 마운트 아래 인스턴스의 변수를 참조합니다.
eg:rrreee팝업 상자 표시: I am Local
Vue에서 소위 전역은 마운트 아래 영역을 나타냅니다. 🎜🎜다음 접근 방식은 잘못된 것 같습니다. 나는 전역이지만 오류가 보고됩니다. 이는 구성 요소가 전역적으로 추가될 수 없음을 의미합니다. 전역 이벤트 기능을 사용하려면 부모-자식 통신이 필요합니다🎜rrreee🎜추가 항목:🎜🎜1 함수 반환 뒤에는 반환된 내용이 와야 하며 쓸 수 없습니다. 새로운 줄에🎜🎜예:🎜🎜🎜🎜🎜아래 이 방법은 값을 반환하지 않습니다: 🎜🎜🎜🎜🎜2 Vue는 es6 함수 작성 방법을 사용하는 작은 프로그램 등과 동일하지만, 이것은 다른 🎜rrreee🎜결과: 🎜🎜첫 번째 this는 Vue 인스턴스를 나타냅니다. 🎜🎜두 번째 this는 Window를 나타냅니다.🎜🎜🎜🎜🎜애플릿과 다르기 때문에 데이터에서 이것이 window를 참조한다는 것을 알았습니다. 그리고 메소드에서는 Vue 인스턴스🎜🎜그래서 es5를 사용하는 것이 좋습니다. Vue 컴포넌트의 세 가지 작성 형식🎜🎜