Vue에서 컴포넌트를 생성하는 방법은 무엇입니까? 아래에서는 Vue에서 구성 요소를 생성하는 두 가지 방법에 대한 요약을 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.
컴포넌트 생성 두 가지 방법 요약
1. 글로벌 등록
2. 로컬 등록
var child=Vue.extend({})
var parent=Vue.extend({})options는 객체입니다.
// 全局注册，my-component1是标签名称
Vue.component('my-component1',{
template: '<p>This is the first component!</p>'
})
var vm1 = new Vue({
el: '#app1'
})옵션 개체의 구성 요소 속성에서 로컬 등록 구현:
var vm2 = new Vue({
el: '#app2',
components: {
// 局部注册，my-component2是标签名称
'my-component2': {
template: '<p>This is the second component!</p>'
},
// 局部注册，my-component3是标签名称
'my-component3': {
template: '<p>This is the third component!</p>'
}
}
})참고: 이는 구성 요소이며 여러 구성 요소를 다음에서 정의할 수 있습니다. 그것 .
간략하게 작성하면 이렇습니다
<body>
<p id='box'>
<parent>
</parent>
</p>
<script src='js/vue.js'></script>
<script>
Vue.component('parent',{
template:`<p><h1>我是父组件</h1><child></child></p>`,
components:{
'child':{
template:`<h1>我是子组件</h1>`
}
}
})
new Vue({
el:'#box'
})
</script>
</body>페이지의 스타일 구조는
<p> <h1>我是父组件</h1> <h1>我是子组件</h1> </p>
입니다. 참고: 로컬로 등록된 하위 구성 요소는 단독으로 직접 사용할 수 없습니다!
태그가 p에 걸리면 오류가 발생합니다
<p id='box'> <child></child> </p>
Angular에서 ng-alain을 기반으로 자신만의 선택 구성 요소를 정의하는 방법은 무엇입니까?
Vue에서 감시 개체 및 해당 값 변경을 구현하는 방법
Vue가 배열이나 개체의 변경 사항을 감지할 수 없는 문제를 해결하는 방법은 무엇입니까?
🎜
위 내용은 Vue에서 구성 요소를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
