이 기사에서는 Vue 구성 요소가 무엇인지 소개합니다. Vue 컴포넌트를 사용하는 방법은 무엇입니까? (코드 예). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
컴포넌트 소개
컴포넌트 시스템은 대규모 인터페이스를 제어 가능한 작은 단위로 나눕니다.
구성 요소는 재사용 및 유지 관리가 가능합니다.
구성 요소는 강력한 캡슐화로 되어 있어 사용하기 쉽습니다.
대규모 애플리케이션에서는 구성 요소 간의 상호 작용이 분리될 수 있습니다.
Vue 구성 요소 사용
전역 구성 요소 사용
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<link>
<script></script>
<div>
<my-header></my-header>
</div>
<script>
//全局组建的定义
Vue.component("my-header", {
template: '<h1>全局组件'
});
var app = new Vue({
el: '#app',
});
</script>
로컬 구성 요소 사용
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<link>
<script></script>
<div>
<my-header></my-header>
</div>
<script>
//局部组件定义
var app = new Vue({
el: '#app',
components: {
'my-header': {
template: '<h1>局部组件'
}
}
});
</script>
컴포넌트 데이터의 특징
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<div>
<my-header></my-header>
<my-header></my-header>
<br>
<my-header1></my-header1>
<my-header1></my-header1>
</div>
<script>
//组件数据之间不共享，Vue实例中的数据也不能共享给组件,并且组件中的data只能使用函数
//组件的数据data使用函数的特点是每次点击或操作组件函数会重新执行，这样就不会影响其它组件，通过下面两个例子可以看出
var data = {
count: 0
};
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue!!!"
},
components: {
'my-header': {
template: '<h1 v-on:click="changeCount">{{count}}',
data: function() {
return data;
},
methods: {
changeCount: function() {
this.count++;
}
}
},
'my-header1': {
template: '<div v-on:click="changeCount1">{{count}}',
data: function() {
return {
count: 0
};
},
methods: {
changeCount1: function() {
this.count++;
}
}
}
}
});
</script>
Vue 인스턴스와 구성 요소 간의 관계
Vue 구성 요소는 실제로 확장 가능한 Vue 인스턴스입니다.
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<div>
{{message}}
</div>
<script>
//Vue组件其实是一个可扩展的Vue实例，Vue实例也可以看成是一个组件
// var app = new Vue({
// el: '#app',
// template: '<h1>app应用'
// });
//使用继承实现Vue组件
var myComponent = Vue.extend({
data: function() {
return {
message: "Hello Vue@@@"
}
}
});
var vm = new myComponent({
el: '#app'
});
</script>
Vue 구성 요소의 템플릿 방법
`
-
nbsp;html> <meta> <meta> <title>Page Title</title> <meta> <script></script> <div> <my-header></my-header> <my-header-1></my-header-1> <my-header-2></my-header-2> <my-header-3></my-header-3> </div> <template> <div> <p> </p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </template> <script> <div> <p> <ul> <li>1</script> - 2
- 3 <script> //Vue模版添加方式 var app = new Vue({ el: '#app', components: { 'my-header': { template: '<div>\ <p>\ <ul>\ <li>1\ <li>2\ <li>3\ \ \ ', data: function() { return { message: "第一项" } } }, 'my-header-1': { template: `<div> <p> <ul> <li>1 <li>2 <li>3 `, }, 'my-header-2': { template: '#temp' }, 'my-header-3': { template: '#temp1' } } }); </script>
- Vue 비상위 구성 요소
-
$emit
- $on
-
Vuex 상태 관리
state
- 돌연변이
- 커밋
- 빈 인스턴스 및 사용자 정의 이벤트 사용(소규모 프로젝트에 적합)
nbsp;html> <meta> <meta> <title>Page Title</title> <meta> <script></script> <div> <!-- 数据在组件中 --> <my-header></my-header> <!-- 父组件向子组件传递数据 --> <my-header-1></my-header-1> <!-- 父组件向子组件传递数据不给值 --> <my-header-1></my-header-1> </div> <!-- 数据在组件中的模版 --> <template> <div> <h1 id="message">{{message}}</h1> <ul> <li>{{item}}</li> </ul> </div> </template> <!-- 父组件向子组件传递数据的模版 --> <template> <div> <h1 id="message">{{message}}</h1> <ul> <li>{{item}}</li> </ul> <my-nav></my-nav> </div> </template> <!-- 子组件向子组件传递数据的模版 --> <template> <div> <h1 id="message">{{message}}</h1> <ul> <li>{{item}}</li> </ul> </div> </template> <script> var vm = new Vue({ el: '#app', data: { temp_2_list: ["1", "2", "3"] }, components: { //数据在自己组件中的实例 'my-header': { template: '#temp-1', data: function() { return { list: ["1", "2", "3"], message: "组件中的数据" }; } }, //父组件向子组件传递数据 'my-header-1': { //props: ["list"], template: '#temp-2', data: function() { return { message: "父组件向子组件传递数据" }; }, //属性的验证与默认值 props: { list: { type: Array, default: ["4", "5", "6"] } }, //子组件的子组件 components: { 'my-nav': { template: '#temp-3', data: function() { return { message: "子组件中的子组件" }; }, props: ["itemlist"] } } } } }); </script>Vuex 상태 관리 - Vue 구성 요소 콘텐츠 배포
- 단일 태그 사용
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<div>
<my-header-1></my-header-1>
</div>
<!-- 父组件向子组件传递数据的模版 -->
<template>
<div>
<h1 id="message">{{message}}</h1>
<ul>
<li>{{item}}</li>
</ul>
<my-nav></my-nav>
</div>
</template>
<!-- 子组件向子组件传递数据的模版 -->
<template>
<div>
<h1 id="message">{{message}}</h1>
<ul>
<li>{{item}}</li>
</ul>
</div>
</template>
<script>
//子组件向父组件传递数据，是发布订阅模式
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//父组件向子组件传递数据
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父组件向子组件传递数据"
};
},
//属性的验证与默认值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
methods: {
getChildContent: function(str) {
debugger
alert(str);
}
},
//子组件的子组件
components: {
'my-nav': {
template: '#temp-3',
data: function() {
return {
message: "子组件中的子组件"
};
},
props: ["itemlist"],
methods: {
getContent: function(ev) {
// console.log(this);
// console.log(ev.target.innerHTML);
this.$emit("change-events", ev.target.innerHTML);
}
}
}
}
}
}
});
</script>
다중 태그 사용
-
nbsp;html> <meta> <meta> <title>Page Title</title> <meta> <script></script> <style> ul { list-style-type: none; } </style> <div> <my-header-1></my-header-1> <my-header-2></my-header-2> </div> <script> //非父子组件通信 //1.0 使用空实例进行非父子组件通信 //定义空实例 //创建步骤是： //1、首先定义一个空实例 //2、需要给被传递数据的A组件使用$emit绑定自定义事件，并将A组件的数据发布给B组件 //3、使用$on订阅A组件发布过来的数据，从而获取数据 var busVm = new Vue(); var vm = new Vue({ el: '#app', components: { //组件B 'my-header-1': { template: `<h1>{{message}}`, data: function() { return { message: "非父子组件通信" }; }, mounted() { //使用bind（this）修正this busVm.$on("changeEnvents", function(param) { this.message = param; }.bind(this)); }, }, //组件A 'my-header-2': { template: `<ul><li @click="getContent" v-for="item in list">{{item}}</script>
-
nbsp;html> <meta> <meta> <title>Page Title</title> <meta> <script></script> <style> ul { list-style-type: none; } </style> <div> <my-header-1> <h1 id="我是标题">我是标题</h1> </my-header-1> <my-header-1> <my-header-2></my-header-2> </my-header-1> </div> <script> //单插槽<slot> var vm = new Vue({ el: '#app', components: { 'my-header-1': { template: `<div>我是头部:<slot>`, }, 'my-header-2': { template: `<h1>我是标题`, } } }); </script>
- 기본 HTML 및 CSS 작성
- 구성요소 추출 중
- 데이터 전송
콘텐츠 배포
이벤트 및 메소드 추가
- Vue에서 DOM 작업($refs 사용)
- rrre 에
위 내용은 Vue 구성요소란 무엇입니까? Vue 컴포넌트를 사용하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명
이 기사는 博客园에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
vue中props可以传递函数吗Jun 16, 2022 am 10:39 AMvue中props可以传递函数；vue中可以将字符串、数组、数字和对象作为props传递，props主要用于组件的传值，目的为了接收外面传过来的数据，语法为“export default {methods: {myFunction() {// ...}}};”。
聊聊vue指令中的修饰符，常用事件修饰符总结May 09, 2022 am 11:07 AM本篇文章带大家聊聊vue指令中的修饰符，对比一下vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！
如何覆盖组件库样式？React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM如何覆盖组件库样式？下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法，希望对大家有所帮助！
react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AMreact与vue的虚拟dom没有区别；react和vue的虚拟dom都是用js对象来模拟真实DOM，用虚拟DOM的diff来最小化更新真实DOM，可以减小不必要的性能损耗，按颗粒度分为不同的类型比较同层级dom节点，进行增、删、移的操作。
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
1 몇 주 전ByDDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다
1 몇 주 전ByDDD
뜨거운 도구
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
뜨거운 주제
Cakephp 튜토리얼137152
1371
52Win11 활성화 키 영구3619
3619