Component는 Vue의 기능 중 하나로, Vue의 가장 강력한 기능 중 하나입니다. Vue에서 구성 요소는 HTML 요소를 확장하고 재사용 가능한 코드를 상위 수준에서 캡슐화할 수 있습니다. 구성 요소는 사용자 정의 요소이며 Vue의 컴파일러는 일부 경우에 특수 기능을 추가하며 is 속성을 사용하여 확장된 기본 HTML 요소일 수도 있습니다. .
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
Vue.js는 프런트엔드 인터페이스 개발을 위한 탁월한 JavaScript 라이브러리로, 뛰어난 기능이 많기 때문에 매우 인기가 있으며 그 주요 기능은 다음과 같습니다.
1) 경량 프레임워크
Vue.js는 종속 템플릿 표현식과 계산된 속성을 자동으로 추적할 수 있고, MVVM 데이터 바인딩 및 구성 가능한 구성 요소 시스템을 제공하며, 독자가 더 쉽게 이해하고 얻을 수 있도록 간단하고 유연한 API를 제공합니다. 더 빠르게 시작되었습니다.
2) 양방향 데이터 바인딩
선언적 렌더링은 양방향 데이터 바인딩의 주요 구현이며 Vue.js의 핵심이기도 합니다. 간결함을 사용하여 데이터의 선언적 렌더링을 DOM에 통합할 수 있습니다. 템플릿 구문.
3) 지침
Vue.js는 주로 내장된 지침을 통해 페이지와 상호 작용합니다. 지침의 기능은 표현식 값이 변경될 때 그에 따라 DOM에 특정 동작을 적용하는 것입니다.
4) 컴포넌트화
Component(Component)는 Vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화할 수 있습니다. 높은 수준에서 구성 요소는 Vue.js 컴파일러가 특별한 기능을 추가하는 사용자 정의 요소입니다. 어떤 경우에는 구성 요소가 is 속성으로 확장된 기본 HTML 요소의 형태를 취할 수도 있습니다.
Vue에서는 부모-자식 구성 요소가 소품을 통해 통신하며, 부모에서 자식으로 단방향 전송이 가능합니다. 하위 구성 요소는 상위 구성 요소와 통신하고 이벤트를 트리거하여 상위 구성 요소에 데이터 변경 사항을 알립니다. 이는 기본적인 아버지-자녀 의사소통 모델을 형성합니다.
개발 중인 구성 요소가 HTML, JavaScript 등과 매우 긴밀한 관계를 가질 때 실제 필요에 따라 구성 요소를 사용자 정의할 수 있어 개발이 더욱 편리해지고 코드 작성 양이 크게 줄어듭니다.
이 구성 요소는 핫 리로드도 지원합니다. 변경하면 페이지가 새로 고쳐지지 않지만 전체 애플리케이션의 현재 상태에 영향을 주지 않고 구성 요소 자체가 즉시 다시 로드됩니다. CSS는 핫 리로딩도 지원합니다.
구성 요소의 장점:
인터페이스를 변경하지 않은 채로 유지하면서 다양한 구성 요소를 교체하여 달력과 같은 구성 요소로 교체할 수 있는 입력 상자와 같은 요구 사항을 신속하게 완료할 수 있습니다. 시간, 범위 등 구체적인 구현을 위해
디버그가 쉽습니다. 전체 시스템이 구성 요소로 구성되어 있기 때문에 문제가 발생하면 제거 방법을 사용하여 구성 요소를 직접 제거하거나 문제를 빠르게 찾을 수 있습니다. 오류를 보고한 구성 요소를 기반으로 합니다. 각 구성 요소의 결합도가 낮고 단일 책임이 있으므로 전체 시스템을 분석하는 것보다 논리가 더 간단하기 때문에 빠르게 찾을 수 있습니다.
단일 책임이 있으며 구성 요소는 시스템에서 재사용되므로 코드를 최적화하면 시스템의 전반적인 업그레이드가 가능합니다
5) 클라이언트 라우팅
Vue-router는 Vue의 공식 라우팅 플러그인입니다. .js는 Vue.js와 긴밀하게 통합되어 있으며 단일 페이지 애플리케이션을 구축하는 데 사용됩니다. Vue 단일 페이지 애플리케이션은 라우팅 및 구성 요소를 기반으로 합니다. 라우팅은 액세스 경로를 설정하고 경로 및 구성 요소를 매핑하는 데 사용됩니다. 기존 페이지는 페이지 전환 및 하이퍼링크를 통한 점프를 구현합니다.
6) 상태 관리
상태 관리는 실제로 단방향 데이터 흐름입니다. State는 View의 렌더링을 주도하며, 사용자는 View를 조작하여 Action을 생성하고 이로 인해 State가 변경됩니다. 다시 렌더링하여 별도의 구성 요소를 형성합니다.
new를 사용하여 여러 vue 개체를 만들고 이름을 지정하면 변수를 통해 서로 액세스할 수 있습니다
예: 개체 2는 이름 변수를 수정합니다. 객체 1
<!-- 第一个根元素 -->
<div>这里是：{{name}}</div>
<!-- 第二个根元素 -->
<div>
<p>这里是：{{name}}</p>
<br>
<button>change-one-name</button>
<!-- 点击后修改vue-app-one的name值-->
</div> // 第一个vue对象
var one = new Vue({
el:"#vue-app-one",
data:{
"name":"ccy1"
}
})
// 第二个vue对象
var two = new Vue({
el:"#vue-app-two",
data:{
"name":"ccy2"
},
methods:{
// 修改vue-app-one的name为'ccy333'
changeName:function(){
one.name = 'ccy333'
}
}
})효과: 클릭한 후 "ccy1"을 "ccy333"
에 정의된 데이터를 호출합니다. 예:
- 당신은해야합니다 구성 요소에 이름을 지정합니다. 구성 요소 이름을 사용자 정의 레이블과 동일하게 사용합니다. 레이블에는 많은 하위 HTML 태그가 포함될 수 있습니다.
- 이러한 하위 HTML 태그는 구성 요소의 템플릿 속성에 정의됩니다. . 구성 요소가 호출될 때마다 템플릿의 템플릿이 렌더링됩니다. 태그
- 템플릿 에는 루트 요소가 하나만 있어야 합니다.
- 구성 요소에서 데이터는 함수입니다. 데이터를 반환할 수 있습니다. 이것을 사용하여 data
정의 구성 요소:
① 定义一个组件，命名为my-component
② 其中包含数据：name和方法：changeName
③ 渲染出的html效果有一个p标签，包含一个按钮，点击按钮时，修改name
④ 命名规范：camelCase (驼峰命名法) 与kebab-case (短横线分隔命名)
- 当写成标签时，遇到有大写字母的命名，需要改成小写并用横杆链接前后两个部分，如定义组件时命名为myComponent，写成标签时应写成my-component>；
- 组件定义时也可以用横杆法命名；
- 如果定义时用myComponent，标签用my-component>是OK的，系统自动识别
// 自定义的全局组件my-component
// template中只有一个根元素p标签，里面包含一个button按钮
Vue.component('my-component',{
template:`<p>
我的名字是：{{name}}
<button>btn</button>
</p>`,
data(){
return {
name:'ccy'
}
},
methods:{
changeName:function(){
this.name = '安之'
}
}
})
// vue对象1
new Vue({
el:"#vue-app-one",
})
// vue对象2
new Vue({
el:"#vue-app-two",
})使用组件：
① 在vue对象对应的根元素（el指定标签）下使用
② 由于定义的是全局组件，所以可以在任意的vue对象下使用
③ 组件可复用，在一个vue对象下可以使用多次，且组件间互相独立
<div> <my-component></my-component> <my-component></my-component> </div> <div> <my-component></my-component> </div>
效果：
在vue对象中，data属性值是一个对象，比如这样的：
但是在全局组件中，同一份data可能被多个vue对象使用，每个对象不单独维护一份data时，如果某一个vue对象修改了data中的一个变量，其他vue对象获取data时就会被影响；
如果用上面的例子做案例，若组件中的data是对象（引用），其他地方均不改变，两个vue对象便共享同一个name变量；当我通过其中一个vue对象改变name数据时（即点击任一个btn按钮），另一个对象获得的name也发生了改变（其他按钮处的’ccy’也都被改成了’安之’）
因此，为保证数据的独立性，即每个实例可以维护一份被返回对象的独立的拷贝，data为每个实例都return一份新创建的数据，不同的vue对象获取的data均互不影响
在vscode中不允许组件中的data是对象，会报错：
[Vue warn]: The “data” option should be a function that returns a per-instance value in component definitions.
- 局部组件注册在某个vue对象中，
- 只有注册过该局部组件的vue对象才能使用这个局部组件
例子：
局部组件定义：
// template仅一个根元素：ul
var msgComponent = {
// 数据是自身提供的 (hobbies)
template:`注册局部组件：
// 仅由注册过该局部组件的vue对象才能使用，此处为div#vue-app-one
// 注意命名规范，components中对象的key将会被作为标签名，多个单词拼接的命名需使用横杆法
// 可以写成msg-component，此处直接简化了命名为msg，
new Vue({
el:"#vue-app-one",
components:{
"msg": msgComponent
}
})html文件中使用<msg></msg>：
<div> <p>这里是vue-app-one</p> <mycomponent></mycomponent> <mycomponent></mycomponent> <p>我的爱好：</p> <msg></msg> <!--使用局部组件--> </div>
效果： 红框圈出的部分就是局部组件渲染出来的
创建子组件：
var titleComponent = {
props:["title"],
template:`<p>{{title}}</p>`
// 所需要的数据title由父组件提供
}在父组件的components属性中注册子组件：
new Vue({
el:"#vue-app-one",
components:{
"msg": msgComponent,
"titleComponent":titleComponent
},
})在父组件上使用子组件：
<!-- div#vue-app-one为父组件 --> <div> <p>这里是vue-app-one</p> <mycomponent></mycomponent> <mycomponent></mycomponent> <!--使用子组件title-component，并传值"我的爱好："给子组件--> <title-component></title-component> <msg></msg> </div>
效果：红框标记处就是父向子传值并展示
定义子组件：
var titleComponent = {
props:["title"],
template:`<p>{{title}}</p>`
}在父组件的components属性中注册子组件：
new Vue({
el:"#vue-app-one",
components:{
"msg": msgComponent,
"titleComponent":titleComponent
},
data(){
return {
title:"my hobbies are ",
}
}
})使用子组件，通过绑定父组件data中的变量title来实现动态传值：
<!-- div#vue-app-one为父组件 --> <div> <p>这里是vue-app-one</p> <mycomponent></mycomponent> <mycomponent></mycomponent> <!-- 动态绑定title --> <title-component></title-component> <msg></msg> </div>
效果：红框处就是动态绑定获取数据的展示
传递数组等复杂数据时，也可以使用v-bind来动态传值，如：
需要向子级传递hobbies数组，在vue实例对象（父）中创建数据hobbies：
new Vue({
el:"#vue-app-one",
components:{
"msg": msgComponent,
"titleComponent":titleComponent
},
data:{
title:"my hobbies are ",
hobbies:['看剧','看动漫','吃好吃的'], //需要向子组件传递的数据
}
})定义子组件：
var msgComponent = {
template:`
<p>{{hobby}}</p>
`,
props:["hobby"],
data(){
return {
}
}
}使用子组件：
<!-- div#vue-app-one为父组件 --> <div> <p>这里是vue-app-one</p> <mycomponent></mycomponent> <mycomponent></mycomponent> <title-component></title-component> <!-- 动态传值：hobbies --> <msg></msg> </div>
效果：
跳回“一点想法”处
子组件不能通过prop向父组件传递数据，需要使用事件向父组件抛出一个值，告知父组件我需要实现一个功能，由父组件处理这个事件
例子：点击按钮，改变名称chinesename
（由于data变量名不支持chinese-name形式，花括号里不支持chineseName形式，所以这里我都用了小写，此处记录一下，日后学到了新知再来填坑）
先在父组件的data中定义chinesename的初始值：
new Vue({
el:"#vue-app-one",
data:{
chinesename:"anzhi" // chinesename初始值
}
})创建子组件，并注册事件change-name（就像click事件一样，需要让系统能够辨认这是一个事件并监听，当事件被触发时，执行某项约定好的操作）：
Vue.component('blog-post', {
props: ['chinesename'],
template: `
<div>
<h4>{{ chinesename }}</h4>
<button>
修改名字
</button>
</div>
`
// blog-post组件包含一个h4，显示chinesename，和一个按钮
// 点击这个按钮，触发change-name事件，将"ruosu"作为参数传递给指定的处理函数onChangeName
})在父组件中使用子组件，定义change-name的处理函数为onChangeName：
<div> <p>这里是vue-app-one</p> <!-- v-bind：通过prop给子组件传递chinesename的初始值 --> <!-- v-on：子组件通过$emit给父组件传递新的chinesename的值 --> <div> <blog-post></blog-post> </div> </div>
在父组件处定义事件处理函数onChangeName：
new Vue({
el:"#vue-app-one",
data:{
chinesename:"anzhi"
},
methods:{
onChangeName:function(value){
// 将chinesename换成传递过来的数据
this.chinesename=value
}
}
})效果：
关于父子组件的区分，在此写一点总结，还是日后学了新知识再来填坑
官网中没有很明确指明两者的定义和区别，在网上搜了一圈，觉得比较多人认可并且好理解的是：
在前面这些父子传值的例子中，我们可以看到，对于局部组件，我们会在某个html根元素中注册并使用，所以此时el指定的根元素在html文件中是这个局部组件的父组件，局部组件在html使用时便是这个父组件的一份子，承担数据传输的责任
跳转到父向子动态传值案例
再用绕口令说一波，即：title-component组件定义处与使用处，两者身份是不一样的，在定义处，它是局部组件，也是子组件，需注册才能使用；在使用处，它是根元素的包含一部分，根元素为父组件，而“它”，承担着父组件与子组件数据沟通的重任
这个总结在全局组件情况下也适用，使用该全局组件的根元素是父组件，如上面的子向父传值的案例，p#vue-app-one是父组件，
图示：
如果是子组件又嵌套了子组件，被嵌套的组件是子子组件，以此类推
위 내용은 구성 요소는 Vue의 기능인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
