vue2 关于组件

时间：2024-10-26 22:16:05

关于组件

组件传值（通信）的方式

组件之间的通信类型：

  • 父组件向子组件或者孙组件传值（子组件拿到父组件的数据）
  • 子组件或者孙组件向父组件传值（父组件拿到了子组件的数据）
  • 子组件之间传值（兄弟组件之间可以拿到数据）

父传后代（后代拿到了父的数据）

第一种 props

父组件引入子组件，绑定数据

 <List :strl='strl'></List>

子组件通过 props 来接受

 props:{
     strl:{
         type:String,
         default:""
     }
 }

这种方式父传子很方便，但是传递给孙子辈的组件比较麻烦（父 => 子 => 孙）。
并且这种方式下子组件不能直接修改父组件的数据（props 数据是只读的）。

第二种 parent

子组件直接使用父组件的数据

子组件通过 this.$parent.xxx 使用父组件的数据。
这种方式，子组件可以修改父组件的数据。
并且可以通过链式，孙子辈组件可以获取到父组件的数据。

第三种 provide/inject

依赖注入
优势：父组件可以直接向某个后代组件传值（不需要一级一级传递）

后代传父（父拿到了后代的数据）

第一种 this.$emit

子组件传值给父组件
子组件定义自定义事件 this.$emit

这种常用于子组件中，通过某种事件（以点击事件为例）来实现由子向父传递信息。
子组件中，元素的标签内添加点击点击事件，在点击事件的回调中通过 this.$emit 由子向父传递一个自定义事件。
父组件中，在子组件的标签内添加上子组件中定义的事件，并为事件绑定一个回调函数，在函数中接收数据。

第二种

父组件直接拿到子组件的数据

<List ref="child"></List>
this.$refs.child.xxx

平辈之间的传值（兄弟可以拿到数据）

通过新建 bus.js 文件来做

发送数据

bus.$emit("change", this.str) // change 是事件名，this.str 是变量名

接收数据

bus.$on("change",func) // change 是事件名，func 是对数据处理的函数

父组件如何直接修改子组件的值

<List ref="child"></List>
this.$refs.child.xxx="yyyy";

子组件如何直接修改父组件的值

子组件中可以使用 this.$parent.xxx 去修改

如何找到父组件

this.$parent

如何找到跟组件

this.$root

keep-alive

keep-alive 是什么？
常用来缓存当前组件。

slot/插槽

父组件想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段，插槽可以实现。
<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

匿名插槽：插槽没有名字

具名插槽：插槽具有名字

作用域插槽：传值
因为插槽本身是在父组件模板中定义的，所以插槽内容可以访问到父组件的数据作用域。
所以作用域插槽是实现子组件向父组件传递数据的，能够让插槽内容访问到子组件的状态。

provide/inject

依赖注入

如何封装组件

涉及 slot、组件通信等。

相关文章