vue的父子组件和局部全局组件有什么区别?[父子组件]
作者: 国猪 来源:segmentfault.com 更新时间:2023-05-25 21:55
就是在组件里面使用另外一个组件,就形成了父子关系
例如在component1中使用component2
component1就是component2的父组件
component2就是component1的子组件
//component1.vue
<template>
<div>
<component2></component2>
</div>
<template>
...
import component2 from 'component2.vue'
我是新手,很感谢您能回复我,或许是我官方教程看的不够仔细,还是不太理解您的回答,请看下面的例子。
<div id="app-4">
<div id="app-5" :style="{ fontSize: postFontSize + 'em' }" >
<blog-post3 v-for="post in posts" v-bind:post="post" v-bind:key="post.id" v-on:enlarge-text="postFontSize += 0.1 "> </blog-post3>
</div>
</div>
<script>
Vue.component('blog-post3', {
props: ['post'],
template: `
<div>
<h3> {{ post.title }}</h3>
<button v-on:click="$emit('enlarge-text')">enlarge text</button>
<div v-html="post.content"></div>
</div>`
});
var app4 = new Vue({
el: '#app-4',
data: {
posts: [
{ id: 1, title: 'My journey with Vue', content: '...content...' },
{ id: 2, title: 'Blogging with Vue', content: '...content...' },
{ id: 3, title: 'Why Vue is so fun', content: '...content...' }
],
postFontSize: 1
}
});
</script>
app-4实例化后<div id="app-4"> 是父组件, <blog-post3>是其子组件.
全局组件,顾名思义,到处都存在。定制性低,扩展性强。
局部组件,就是某处,例如 <page-a> 组件的 script 内,引入外部组件 <list> 后才存在于该组件内的组件。
一些不想到处使用的组件,就用局部组件。这种组件定制性高,扩展性差,一般是二次封装的专供该页面使用的组件。
上一篇:主流的网页宽度是多少像素? 下一篇:Vue中非父子组件传值的问题[父子组件]