vue中的父子组件

实现方式：父组件通过 v-bind 属性绑定向子组件共享数据。同时，子组件需要使用 props 接收数据

它的缺点:无法为每个 prop 指定具体的数据类型,也无法进行相应的校验

详细的 props 验证方案，请参考 vue 的官方文档：

>

html页面上进行dialog接受父页面参数的解决办法

最后的解决办法是

父页面进行 *** 作：

1 <input type="hidden" id="appvid"/>

2var rowData = $('#resultList')data('selectedDatas');// 取得选中行数据。 （这个是b-jui获取dataGrid选中航数据的代码）

// 这些是拿到相应的值

var appVid = rowData[0]appVid;

//将值赋给上面的隐藏input

$("#appvid")val(appVid);

子页面进行的 *** 作：

//主要语法windowparentdocumentgetElementById("id")value; 去获取父页面隐藏域的值

$(function(){

var Vid = windowparentdocumentgetElementById("appvid")value;

//再将值赋给子页面的input框

$("#Vid")val(Vid);

})

其实这种写法很low，但是也算是能解决问题吧！其实之前我用的是另一种办法的 貌似比这个简单，但是由于代码丢失死活想不起来了（大哭）。

可能原因：

1、子组件没有 name 属性，父组件匹配不到

2、属性命名格式不对

子组件中获取不到父组件中传递过来的activeKEY，一直是undefined

解决方法：

将 activeKEY 修改为 activeKey 就可以了

Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。

父组件注入，子组件接收。

这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

ref ：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

$parent / $children ：访问父 / 子实例

$attrs： 包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。

当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

$listeners ：包含了父作用域中的 (不含 native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

vuex的详细使用方法： vuex管理状态仓库使用详解

avue 引用了一个detail组件

第一步：首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。

两个初始化事件中心的方法：

第二步：创建了 EventBus ，接下来你需要做到的就是在你的组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。

假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想通知 B页面。

接下来，我们需要在 B页面 中接收这则消息。

同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法：

如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复 *** 作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。

如果想移除事件的监听，可以像下面这样 *** 作：

$on 事件是不会自动清楚销毁的，需要我们手动来销毁，否则在b组件每次加载一次就会创建一个监听，会重复监听到数据。

可以使用 EventBus$off('aMsg') 来移除应用内所有对此某个事件的监听。

或者直接调用 EventBus$off() 来移除所有事件频道，不需要添加任何参数 。

因为页面跳转的时候 ，a页面在之前已经emit了，但是b页面首次并没有created，b页面还监听不到。

可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候，B页面组件已经被created了，也就是我们写的$on事件已经可以触发了

所以可以，在beforeDestory的时候，$emit事件。例如：

参考eventbus实战记录： >

script：

// changeName:子组件watch的 this$emit('changeName', thisprovince)的changeName，是自定义的

// lockValue：父组件的方法名

                    父子传值

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

$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中的父子组件全部的内容，包括:vue中的父子组件、vue 自定义组件(二) $parent、$children、ref、refs、怎么获取dialog父页面的属性等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！