Vue基础（四）：组件及组件间的传值

最爱吃番茄炒蛋

于 2023-07-28 23:49:16 发布

阅读量352

点赞数 1

分类专栏：前端笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_56743396/article/details/131989516

版权

本文详细介绍了Vue中组件的创建与使用，包括全局组件和局部组件的定义，子组件的注册与数据处理，以及组件间通信的多种方法，如父传子、子传父和非父子组件间的通讯策略，探讨了事件总线和Vuex状态管理等解决方案。

摘要由CSDN通过智能技术生成

1、全局组件

全局组件 component

模板 template

语法：Vue.component(‘组件名’,{

template:‘自定义标签代表的是什么’

})

		<!-- 自定义组件的使用 -->
        <my-header></my-header>

		Vue.component('my-header',{
   
            template:'<h1>标题</h1>'
        })

2、局部组件

语法：components:{

// 组件命名：可以使用’-',需要加引号，也可以写驼峰式命名

组件名:{

template:‘内容’

}

		<!-- 组件的使用（标签不支持驼峰命名） -->
        <my-header></my-header>


		components:{
   
                /* 
                    局部组件
                    语法：组件名：{}
                    组件命名：可以使用'-',需要加引号，也可以写驼峰式命名
                */
                myHeader:{
   
                    template:'<h1>标题</h1>'
                }
            },

3、局部组件模板写法

模板抽取：在组件中写多个元素

注意：模板中根标签只有一个，所以基本上一个组件都是div

	<template id="tmp1">
        <!-- 在模板中根标签只有一个（vue2） -->
        <div>
            <h1>标题</h1>
            <p>这是一个段落</p>
        </div>
    </template>

4、子组件的注册使用

	<div id='app'>
        <!-- 子组件的使用 -->
        <child title=20></child>
        <child></child>
    </div>
    <template id="tmp1">
        <div>
            <h1>{
  {title}}</h1&g