Vue子组件向父组件传递数据
Posted ifon
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue子组件向父组件传递数据相关的知识，希望对你有一定的参考价值。
引言
开始时我们先来用之前的父组件向子组件传递数据的知识完成下面这个问题
- 父组件如何向子组件传递一个方法呢？
总结来说就一句话: 通过事件绑定机制，将父组件上的方法传递给子组件
我们需要用到的东西
- vue实例，并在实例上定义一个方法
- 创建子组件
// 1
var vm = new Vue(
el : "#app",
methods:
show()
console.log(’我是父组件上的方法‘);
,
)
// 2
<template id="tem">
<div>
<h3>我是子组件</h3>
// 点击button按钮，通过$emit实例api自定义方法
<button @click="button">触发父组件传递过来的方法</button>
</div>
</template>
Vue.component('tem-app',
template : '#tem',
methods:
button()
// vm.$emit( eventName, […args] ) :
// 触发当前实例上的事件
// 参数一，实例[父组件]定义的方法【事件名称】
// 参数二，可选的，子组件向父组件传递的数据，可以是多个，
this.$emit('func')
,
)
// 3ok ,再来看看我们vue实例所要控制的区域
<div id="app">
// 父组件通过绑定了一个由子组件定义的方法，将自己身上的方法传递过去
<tem-app @func="show"></tem-app>
</div>这样我们就完成了，父组件向子组件传递一个方法的问题了
我通过上面的例子再来看看
- 如何往父组件传递数据?
- 这其实很简单
- 通过 $meit方法的第二个参数，将数据传递过去，父组件方法接收子组件传递过来的数据即可
var obj =
name : "张三",
age : 18,
sex : "男"
// vue实例
var vm = new Vue(
el : "#app",
methods:
show(obj)
// 父组件拿到子组件传递过来的数据
console.log(obj)
,
)
完整代码
<body>
<!--
通过事件绑定机制，将父组件上的方法传递给子组件,
子组件通过第二的参数将数据传递给父组件
-->
<div id="app">
<tem-app @func="show"></tem-app>
</div>
<template id="tem">
<div>
<h3>我是子组件</h3>
<button @click="button">触发父组件传递过来的方法</button>
</div>
</template>
<script>
var obj =
name : '李嘉明',
age : 12,
sex : '男'
Vue.component('tem-app',
template : '#tem',
data : function()
return
msg : '我是子组件上的数据'
,
methods:
button()
// vm.$emit( eventName, […args] ) :
// 触发当前实例上的事件
// 参数一，实例[父组件]定义的方法
// 参数二，可选的，子组件向父组件传递的数据，可以是多个，
this.$emit('func',obj)
,
)
var vm = new Vue(
el : "#app",
methods:
show(obj)
// 父组件拿到子组件传递过来的数据
console.log(obj)
,
)
</script>
</body>
总结：
1. 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2. 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3. 在父组件上绑定子组件$meit自定义的方法
以上是关于Vue子组件向父组件传递数据的主要内容，如果未能解决你的问题，请参考以下文章
Vue父子组件通信（父级向子级传递数据子级向父级传递数据Vue父子组件存储到data数据的访问）
Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据