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

Question

如题所述

Answer 1

                    父子传值

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

$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;

设置轮廓线的隐藏