怎样操作Vue表单类父子组件数据传递

“阿弥陀佛，善哉善哉。”

“魔镜啊！魔镜，谁是这世界上最美丽的女人？”

“愿上帝保佑你，阿门！”

等等，这些语句是不是特别经典？特别有画面感？眼前立马浮现出家人、后母和牧师？

通过言语，可以判断一个人的职业、身份、地位。

通过特殊语句可以与神明通话，可以和精灵共舞。

（1）props / $emit 适用 父子组件通信

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

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

注意：props是单向数据流，既只能从父级传到子级，如果想要达到双向，子级能够修改父级，则需要给props加sync修饰符。(文章后部分有详细介绍)

（2）ref 与 $parent / $children 适用 父子组件通信

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

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

（3）$attrs / $listeners 适用于 隔代组件通信

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

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

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

（4）provide / inject 适用于 隔代组件通信

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

（5）EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信

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

（6）Vuex 适用于 父子、隔代、兄弟组件通信

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

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

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

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

Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你知道的回答出越多方法越加分，表明你对 Vue 掌握的越熟练。

举例props使用

avue 引用了一个detail组件

详解eventBus通信方法

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

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

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

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

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

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

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

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

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

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

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

总结： 所以，如果想要用bus 来进行页面组件之间的数据传递，需要注意两点，组件A$emit事件应在beforeDestory生命周期内。其次，组件B内的$on记得要销毁。

本篇文章主要介绍了Vue20学习之详解Vue 组件及父子组件通信，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

什么是组件？

vue中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘，键盘，鼠标），它就是一个具有独立逻辑或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。

页面就是由一个个类似这样的部分组成的，比如导航，列表，弹窗，下拉列表等。页面只不过是这些组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。

前端组件化的核心思路就是将一个巨大复杂的东西拆分成颗粒度合理的小东西。

使用组件的好处？

1、提高开发效率

2、方便重复使用

3、简化调试步骤

4、提升整个项目的可维护性

5、便于协同开发

vue中的组件

vue中的组件是一个自定义标签，vuejs的编译器为它添加特殊功能

vue中的组件也可以扩展原生的html元素，封装可重用的代码

组件的基本组成：样式结构，行为逻辑，数据

注册组件

全局注册

可以在任何模板中使用，使用之前要先注册

语法：使用Vuecompontent(组件名，选项对象)

组件名命名约定：驼峰，烤串

在html中使用组件：使用烤串命名法

例如，注册Vuecompontent('my-compontent',{}),使用的时候<my-compontent></my-compontent>

<p id="app">

<h2>自定义下拉框</h2>

<cus-list></cus-list>

<cus-list></cus-list>

</p>

<script type="text/javascript" src='https://i0jrjimgcn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vueminjs'></script>

<script type="text/javascript">

// 全局注册组件

Vuecomponent('cus-list',{

data(){

return {

}

},

template:`

<section>

<p>

<p>

<input type="text">

<input type="button" name="" value="">

<span></span>

</p>

</p>

</section>

`

})

new Vue({

el:"#app",

data:{

}

})

</script>使用的时候，只要在页面上召唤这个组件就可使用，并且可以复用。

组件png

局部注册

在组件实例中通过选项对象注册，只在所注册的作用域中使用

<p id="app">

<h2>自定义下拉框</h2>

<cus-list></cus-list>

<cus-list></cus-list>

</p>

<script type="text/javascript" src='https://i0jrjimgcn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vueminjs'></script>

<script>

new Vue({

el:"#app",

components:{

'cus-list':{

template:`

<section>

<p>

<p>

<input type="text">

<input type="button" name="" value="">

<span></span>

</p>

</p>

</section>

`

}

},

data:{

}

})

</script>局部注册的组件，只有在当前实例的作用域中才可以使用，在作用域中也可以复用，效果如下。

组件png

父子组件间通信

父组件给子组件通信

父组件===》子组件（用props）

组件实例的作用域是孤立的，不能再子组件直接用父组件的数据。

可以在组件上使用自定义属性绑定数据，在组件中组要显示的用props生命自定义属性名。

也就是记住一句话，父组件给子组件传值得时候，就是调用组件时给组件添加 一个属性，然后在组件内用props接收即可，组件内根据属性名即可使用。

<p id="app">

<h2>自定义下拉框</h2>

<cus-list btn-value="查询"></cus-list>

<cus-list btn-value="搜索"></cus-list>

</p>

<script type="text/javascript" src='https://i0jrjimgcn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vueminjs'></script>

<script>

Vuecomponent('cus-list',{

data(){

},

props:['btnValue'],

template:`

<section>

<p>

<p>

<input type="text">

<input type="button" name="" :value="btnValue">

<span></span>

</p>

</p>

</section>

`

})

new Vue({

el:"#app",

data:{

}

})

</script>页面效果

props传值png

子组件给父组件通信

子组件===》父组件

需要用到自定义时间，父组件用$on监听自定义事件，$emit触发父组件所关心的自定义事件。

1、在子组件中定义事件内容<li v-for="item of list" @click="clickLi(item)">{{item}}</li>

2、父组件中v-on自定义事件进行接收v-on:receive="changeValue"

3、在触发子组件事件的时候，$emit 通知父组件 this$emit("receive",item);

4、父组件根据自定义事件进行相应反馈changeValue:function(value){thisval = value;}

看如下案例，点击input的时候，出现下拉列表框，选中相应的列表，列表内容出现在input框中。

<p id="app">

<h2>自定义下拉框</h2>

<cus-list select-Value="搜索" v-bind:list="list1" >

</cus-list>

</p>

<script type="text/javascript" src='https://i0jrjimgcn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vueminjs'></script>

<script type="text/javascript">

// 全局注册组件

Vuecomponent('cus-list',{

data(){

return {

selectShow:false,

val:''

}

},

props:['selectValue','list'],

template:`

<section>

<p>

<p>

<input type="text" @click="selectShow = !selectShow" :value="val">

<input type="button" name="" :value="selectValue">

</p>

<list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li>

</p>

</section>

`,

methods:{

changeValue:function(value){

thisval = value;

}

}

})

Vuecomponent('list-li',{

props:['list'],

template:`

<ul>

<li v-for="item of list" @click="clickLi(item)">{{item}}</li>

</ul>

`,

methods:{

clickLi:function(item){

this$emit("receive",item);

}

}

})

new Vue({

el:"#app",

data:{

list1:['宋仲基','余文乐','鹿晗','陈小春','黄晓明','易烊千玺']

}

})

</script>上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Django与Vue语法中存在冲突问题如何解决

在nodejs中如何实现爬取网站

有关ES6/JavaScript使用技巧（详细教程）

使用微信小程序如何实现动态设置placeholder提示文字

这次给大家带来怎样操作Vue表单类父子组件数据传递，操作Vue表单类父子组件数据传递的注意事项有哪些，下面就是实战案例，一起来看一下。

使用Vuejs进行项目开发，那必然会使用基于组件的开发方式，这种方式的确给开发和维护带来的一定的便利性，但如果涉及到组件之间的数据与状态传递交互，就是一件麻烦事了，特别是面对有一大堆表单的页面。

在这里记录一下我平时常用的处理方式，这篇文章主要记录父子组件间的数据传递，非父子组件主要通过Vuex处理，这篇文章暂时不作说明。

与文档里给的方案一样，父组件向子组件传递数据主要通过 props，子组件向父组件传递数据主要通过触发器 $emit()，只是在用法上会有些不同。

1、传递基本类型数据

当子组件内容较少时，会直接传递基本类型数据，通常为String, Number, Boolean三种。

先看个例子：

<!-- 父组件 parentvue -->

<template>

<p class="parent">

<h3>问卷调查</h3>

<child v-model="formname"></child>

<p class="">

<p>姓名：{{formname}}</p>

</p>

</p>

</template>

<script>

import child from '/childvue'

export default {

components: {

child

}，

data () {

return {

form: {

name: '请输入姓名'

}

}

}

}

</script><!-- 子组件 childvue -->

<template>

<p class="child">

<label>

姓名：<input type="text" :value="currentValue" @input="changeName">

</label>

</p>

</template>

<script>

export default {

props: {

// 这个 prop 属性必须是 valule，因为 v-model 展开所 v-bind 的就是 value

value: ''

},

methods: {

changeName (e) {

// 给input元素的 input 事件绑定一个方法 changeName

// 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。

this$emit('input', etargetvalue)

}

}

}

</script>给子组件的 input 事件绑定一个方法 changeName，每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。

父组件通过 v-model 指令绑定一个值，来接收子组件传递过来的数据。但这样只是父组件响应子组件的数据，如果还要子组件响应父组件传递的数据，就需要给子组件定义一个props属性 value，并且这个属性必须是 value，不能写个其它单词。

v-model 其实就是一个语法糖，详情可以参考使用自定义事件的表单输入组件。

2、传递引用类型数据

当子组件里的内容比较多时，比如子组件有多个表单元素，如果还像上面那样给每个表单元素绑定值，那就要写很多重复代码了。所以这个时候通常传递的是一个对象，传值的基本原理不变，不过写法上会有些不同。

还是先看代码：

<!-- 父组件 parentvue -->

<template>

<p class="parent">

<h3>问卷调查</h3>

<child :formDatasync="form"></child>

<p class="">

<p>姓名：{{formname}}</p>

</p>

</p>

</template>

<script>

import child from '/childvue'

export default {

components: {

child

},

data () {

return {

form: {

name: '请输入姓名',

age: '21'

}

}

}

}

</script><!-- 子组件 childvue -->

<template>

<p class="child">

<label>

姓名：<input type="text" v-model="formname">

</label>

<label>

年龄：<input type="text" v-model="formage">

</label>

<label>

地点：<input type="text" v-model="formaddress">

</label>

</p>

</template>

<script>

export default {

data () {

return {

form: {

name: '',

age: '',

address: ''

}

}

},

props: {

// 这个 prop 属性接收父组件传递进来的值

formData: Object

},

watch: {

// 因为不能直接修改 props 里的属性，所以不能直接把 formData 通过v-model进行绑定

// 在这里我们需要监听 formData，当它发生变化时，立即将值赋给 data 里的 form

formData: {

immediate: true,

handler (val) {

thisform = val

}

}

},

mounted () {

// props 是单向数据流，通过触发 update 事件绑定 formData，

// 将 data 里的 form 指向父组件通过 formData 绑定的那个对象

// 父组件在绑定 formData 的时候，需要加上 sync

this$emit('update:formData', thisform)

}

}

</script>props 是单向数据流，当我们需要对 props 内的属性进行双向绑定时，就需要用到sync 修饰符，详情请参考sync 修饰符，这里不做赘述。

这里需要注意的是，vue 中是不能直接修改 props 的，所以如果我们要向父组件传值，还是需要通过修改 data 里的值，prop 只是作为父子之间通话的中间人存在。

另外，如果我们想要预览父组件最开始传的数据，就需要通过 watch 监听 prop 的变化，在子组件初始化的时候就把值传进去。

注意： 我在子组件里把 this$emit('update:formData', thisform) 放在 mounted 当中的，其原因是为了避免在每个 input 标签的 input 事件中触发自定义事件，但这样写的前提是，父子组件都要共用一个对象。

这也就是上面代码中，父组件中使用 :formDatasync="form" 绑定值时，form 是一个对象，而子组件中的触发自定义事件 this$emit('update:formData', thisform) ，thisform 也得是一个对象。

这里还需要注意的是，如果有多个子组件使用一个对象，那就要避免这种写法，因为一个组件修改了这个对象的数据，那么其它子组件也就都跟着改变了。

所以我在用的时候都是给每个子组件分配了一个自己的对象，比如：

data () {

return {

parentObject: {

child_1_obj: {},

child_2_obj: {},

}

}

}这是在父组件里定义的数据，当然名字不会这样取了。

结尾

也没什么说的了，对 Vue 还是处于使用的阶段，对其底层的东西了解还不够，我也好想读读源码，但总只是想想大家觉得有什么不妥的地方尽管说，大家相互交流交流。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

使用JS判断字符串中包含内容方法总结

JS+HTML5实绑定鼠标事件的粒子动画

下面我就为大家分享一篇Vue20子同级组件之间数据交互方法，具有很好的参考价值，希望对大家有所帮助。

熟悉了Vuejs的同级组件之间通信，写此文章，以便记录。

Vue是一个轻量级的渐进式框架，对于它的一些特性和优点，请在官网上进行查看，不再赘述。

使用NPM及相关命令行工具初始化的Vue工程，目录结构如下

接着我们进入Demo，首先我们可以删除掉模板项目中src/components/Hellovue,然后在Appvue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西，此时的Appvue应为这样

一、我们先来创建中央事件总线，在src/assets/下创建一个eventBusjs,

内容如下（eventBus中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。）

二、 创建一个firstChild组件，引入eventBus这个事件总线，接着添加一个按钮并绑定一个点击事件

1、我们在响应点击事件的sendMsg函数中用$emit触发了一个自定义的userDefinedEvent事件，并传递了一个字符串参数

2、$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

三、 我们再创建一个secondChild组件，引入eventBus事件总线，并用一个p标签来显示传递过来的值

1、我们在mounted中，监听了userDefinedEvent,并把传递过来的字符串参数传递给了$on监听器的回调函数

2、mounted:是一个Vue生命周期中的钩子函数，简单点说就类似于jQuery的ready，Vue会在文档加载完毕后调用mounted函数。

3、$on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由$emit触发，回调函数会接收所有传入事件触发函数($emit)的额外参数。

四、在父组件中，注册这两个组件，并添加这两个组件的标签

保存所有修改的文件，然后打开浏览器窗口，内容如下(css请自行处理)

点击向组件传值按钮，我们可以看到传值成功

总结：

1、创建一个事件总线，例如demo中的eventBus，用它作为通信桥梁

2、在需要传值的组件中用bus$emit触发一个自定义事件，并传递参数

3、在需要接收数据的组件中用bus$on监听自定义事件，并在回调函数中处理传递过来的参数

另外：

1、兄弟组件之间与父子组件之间的数据交互，两者相比较，兄弟组件之间的通信其实和子组件向父组件传值有些类似，其实他们的通信原理都是相同的，例如子向父传值也是$emit和$on的形式，只是没有eventBus，但若我们仔细想想，此时父组件其实就充当了bus这个事件总线的角色。

2、这种用一个Vue实例来作为中央事件总线来管理组件通信的方法只适用于通信需求简单一点的项目，对于更复杂的情况，Vue也有提供更复杂的状态管理模式Vuex来进行处理。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

web3js增加ethgetRawTransactionByHash(txhash)方法步骤

nodejs简单访问及操作mysql数据库的方法示例

vue-cli创建的项目,配置多页面的实现方法

网站搭建框架之vue

Vue是web前端快速搭建网站的框架之一。它与jQuery有所不同，是以数据驱动web界面（以操作数据改变页面，而jQuery是以操作节点来改变页面），同时，vue还实现了数据的双向绑定，可及时响应用户的输入。最主要的是vue的写法简单，容易掌握，组件形式可以大大提高工作效率。

对于vue的使用可以分为两种使用形式：1引入vuejs文件，在js中将vue实例化；2通过node安装第三方包--vue，搭建脚手架，用脚手架将页面分成几个组件编写，从而利用组件来搭建页面。

引入vuejs的写法

Vue分为V层（视图层）和M层（数据层），一般都是由M层的数据来驱动V层的改变。而vue的常用指令数量不多且写法简单。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是将数据写进标签内，但它们的不同之处在于v-text会将标签当做文本内容写入

，而v-html则会对标签进行编译，只显示标签内的内容。

至于v-show、v-if、v-else这三个指令都是通过布尔值的判断来执行的，当布尔值为真时，设置了v-show、v-if指令的标签会显示出来，当布尔值为假时，标签隐藏；而v-else与这两个指令相反。除此之外，v-show和v-if、v-else之间也有差别，v-show是改变标签的display属性来使标签显示或隐藏；而v-if、v-else是通过添加或删除节点，来显示或隐藏标签的。

V-for是vue的一种遍历方法，这个方法极大的简化了数组或对象的遍历并显示到页面的步骤

而v-bind：是对html属性或自定义属性的数据驱动方式，格式为v-bind:href，可简写为：href。对于类（class）的操作是通过布尔值来判断增加或者隐藏类，同时。类和样式（style）所接受的数据类型为对象。

V-model指令的作用是将数据进行双向绑定，仅限于输入类型标签。当用户在页面输入时，数据层的数据会跟着改变。这是VM模式。由v驱动m。

除了这些普通的指令之外，还有事件指令v-on:，可简写为@+事件名，例如：@click，并将执行函数写到vue的methods中

通过脚手架来写项目的话，可用通过写组件，再将组件引入（注册）到另一个vue文件里拼接在一起，从而构建出一个页面。

（组件书写格式）

（组件整合）

（注册路由）

路由是通过vue-router来实现的，在注册路由的时候要将router实例化。不同的路由跳转不同的页面，这是搭建单页面应用的优势。

而父组件与子组件之间的通讯可以通过props将父组件的信息传递给子组件，改变子组件的内容，这样子组件的复用就不会有障碍了，而子组件传递信息给父组件或者其他组件的通讯则需vuex。

通过引入vuex并实例化一个VuexStore作为一个公共平台，将数据进行传输。通过vue的computed方法接收数据，通过methods方法改变数据。而这个公用平台可以实现组件与组件之间的信息传递，从而实现组件之间的交互。

通过一个星期的实战，深深的体会到了vue的优势，在构建移动端这方面的效率很高。但在搭建的过程中，还是少不了与jQuery结合，毕竟每个工具都有其优点，择其优而用是明智的选择。