跳到主要内容

vue的父子组件和局部全局组件有什么区别?[父子组件]

国猪

https://segmentfault.com/q/1010000015557298?utm_source=tag-newest

2019年06月10日 2,081 次阅读
本页目录

就是在组件里面使用另外一个组件,就形成了父子关系

例如在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> 后才存在于该组件内的组件。
一些不想到处使用的组件,就用局部组件。这种组件定制性高,扩展性差,一般是二次封装的专供该页面使用的组件。

Related

相关文章

同分类文章 →
2025年06月10日 前端

gemini-2.5-pro-0605 按图生成html效果测试

Gemini 最新推出的 2.5 版本真的有点东西。之前用过不少 AI 辅助写代码的工具,但这次它的&ldquo;图生 HTML&rdquo;功能确实让我眼前一亮&mdash;&mdash;上传一张设计图,它不仅能快速识别布局和元素,还能生成结构清晰、样

2025年03月14日 前端

css flex-1和overflow-hidden结合使用详解:弹性布局与内容溢出控制

在 Flexbox 布局中,flex: 1 和 overflow: hidden 是两个常用的属性,它们组合使用可以有效地控制子元素的尺寸和内容显示。flex: 1 的作用:当子元素设置 flex: 1 时,它会根据 Flex 容器的主轴方向,自动伸缩以填充剩余的可用

2025年03月13日 前端

Vue 3中实现处理后的v-model双向绑定

在Vue 3中,当你需要对v-model传入的值进行处理后再展示或使用时,可以使用计算属性的getter和setter来实现这种处理过程的双向绑定。 实现步骤 接收父组件传递的v-model值 创建计算属性,在getter中处理展示值,在setter中处

WeChat

扫码加我微信

微信二维码