vue2 父子传值 （初学者）内容可能不太规范 欢迎大家指导

Posted 2023-04-27

参考技术A                     父子传值

所有的生命周期函数都是自执行函数

$emit  把事件抛给父页面  通过自定义事件让父页面进行处理

组件

组件的核心概念: 可复用性强

组件的名字可以随意起 一般都使用驼峰命名法 但是标签一般使用  — 连接

例 ： <my-Header> </my-Header>

传值和传引用的区别

传值指的是传String、布尔等基本类型值；传值只改变所设定的要改变的值

引用指的是传对象、数组等引用类型值；传引用当改变一个数据的值，则与该绑定的值相关的值都会发生变化

 props 父向子传值 ：

 例如这张图片上的按钮 不同样式可以切换不同的类型 就是使用了父传子

例如：这是子组件 使用props定义类型

可以是 number Arry object 等类型

default 默认值 例如传的是Boolean类型default默认为true或false

、

  这是父组件 使用:定义内容上面子组件规定了 title和sc是字符串类型

这是效果 这里展示了 组件内容的重复使用

子传父$emit

$emit 有两个参数 第一个是自定义事件的名字

这是子页面 写了一个点击事件

使用emit自定义一个事件名字 传递给父组件

父组件接收

 下面模仿element-ui封装不同按钮的类型可以对应不同的按钮样式

第一步：子组件定义一个按钮 这里定义了type类型

 父组件 引入 注册 使用

这是没改变前的效果

第二步：子组件 动态绑定一个actives

然后开启监听 immediate是立即执行

这是父组件

然后在子组件添加样式

效果

总结: 在子组件上面绑定一个属性属性名必须是:class 属性值名字可以随便起

然后在父组件定义了一个数据 内容 可以随便起

然后在组件监听type 并开启立即执行这样就不用等带type变化了

并且把父组件传递的名字的定义一个样式赋值给动态绑定的属性

这是子：

这是父：

然后：

这里记录一下 input 和button的轮廓线属性

设置轮廓线的颜色

  outline-color: red;

这是效果

outline: none;

设置轮廓线的隐藏

Vue父子组件传值

参考技术A

通过props来传值：

静态传值就是直接通过props来传递

动态传值是通过v-bind来绑定一个要传递值的key，然后后面跟要传递的内容，不过这个内容是可以改变的

比如：

传递的值会跟着input里面输入的值改变而改变

组件可以为 props 指定验证要求。

prop 是一个对象而不是字符串数组时，它包含验证要求

通过ref来传值：

在父组件引用的子组件中采用ref=’要传递的值的key’

父组件中：

子组件中：

这样就将父组件中的message中的内容传递到子组件中的msg变量中

emit是子组件向父组件的传值方式

子组件可以使用 $emit 触发父组件的自定义事件

父组件：

子组件：

Slot：

父组件向子组件传递模板采用slot：

父组件中：

子组件：

如果父组件没传递模板，slot里面有内容的话，就会显示内容

如果有多个模板要进行传递，这需要在slot中通过命名（name）来区分：

父组件中：

子组件：