组件的各种类型及案例

最新推荐文章于 2024-07-15 23:28:46 发布

weixin_44923277

最新推荐文章于 2024-07-15 23:28:46 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/weixin_44923277/article/details/89459393

版权

本文探讨了Vue组件的不同类型，强调了组件命名规范和单向数据流的重要性。详细介绍了父子组件间的通信方式，包括简单数据类型绑定、复杂数据类型引用、方法传递以及自定义事件。还讨论了非父子组件通信的策略，如使用ref和事件总线，并提及了多组件状态共享的解决方案——Vue-Router和Vuex。

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

组件的类型

Vue.component(组建名称, 组件的配置)
在组件中使用components的配置项来表示
问题：
组件命名问题

组件命名和html原生标签冲突 Header Footer ----> header footer
大驼峰的写法

Vue.componennt('ZhangJun',{
   
template: '<div></div>'
})

<div id = "app">
<!-- <ZhangJun></ZhangJun> 错的-->
<zhang-jun></zhang-jun>
</div>

.box{
   
background-color: red
}

box.style.backgroundColor = 'red'

组件通信

注意：组件通信，无论效果是如何的， Vue都是单向数据流（组件之间的数据通信）

父子组件通信

绑定的是简单类型数据

父组件中定义数据，通过单向数据绑定的形式，将数据绑定在子组件身上，属性是自定义属性，
子组件通过配置项中的props接收数据， props可以是一个数组，数组中放的是自定义属性名称
那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用
父组件中数据一旦修改，子组件数据就会修改，那么这也就是单项数据流
子父通信（效果上像，间接的使用了父组件的东西）【不推荐大家使用】

eg:HTML部分

<body>
<div id="app">
<Father></Father>
</div>
<template id="Father">
<div class="father_box">
<h3>骏仔</h3>
<Son v-bind:money='money'></Son>
<!-- <Son :money='money'></Son> -->
</div>
</template>
<template id="Son">
<div id="Son_box">
<p>骏仔今天洗了:{
  {money}}次脚</p>
</div>
</template>
</body>

js部分

<script>
Vue.component('Father',{
template: '#Father',
data(){
return {
money:1000
}
}
})
Vue.component('Son',{
template:'#Son',
props:['money']
})
new Vue({
el:'#app',
})
</script>

绑定复杂数据类型 --------

父组件中的数据是一复杂数据类型，那么父组件绑定数据的时候，给子组件的是一个引用地址
子组件可以通过这个引用地址，修改这个数据
效果上像，子组件和父组件通信了，违背单项数据流

eg:HTML部分

<body>
<div id="app">
<Father/>
</div>
<template id="father">
<div id="father_box">
<h3>Father</h3>
<p>我现在有: {
  {sifangqian.money}}元</p>
<son :sifangqian='sifangqian'> </son>
</div>
</template>
<template id="son">
<div id

最低0.47元/天解锁文章

weixin_44923277

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件的各种类型及案例

组件的类型Vue.component(组建名称, 组件的配置)在组件中使用components的配置项来表示问题：组件命名问题组件命名和html原生标签冲突 Header Footer ----> header footer大驼峰的写法Vue.componennt('ZhangJun',{template: '<div></div>'})...
复制链接

扫一扫