vue 子组件向父组件发送数据

来源:互联网 发布:爱奇艺自制网络剧破案 编辑:程序博客网 时间:2024/06/17 03:05

子组件向父组件发送数据
直接分二步
一. 在子组件数据发生改变时或者改变后的触发函数中,提交要发送的数据,格式如下:

this.$emit(‘key’,data1,data2);
key 为一个字符串标识,后面为传递的数据。

二 . 在父组件中接受这些数据 格式如下:

  <child v-on:key='fun'><child> <script> methods:{    fun(data1,data2){      console.log(data1,data2)      }} </script>

v-on接受字符串标识key,并把数据传递给后面的函数,也就是调用这个函数,每次数据更新都会调用这个函数。


父组件向子组件传递数据,比较简单。
也是分二步
三. 在父组件中发送这些数据 格式如下:

   <child  :key='data'><child>

key 还是为字符串标识,data为发送的数据

四. 在子组件中接受这些数据 格式如下:
props:[‘key’]

可以用在模板

<template><p>{{key}}</p> </template>

也可以在js里使用

methods:{
fun(){
this.$props.key
}
}

注意有些k在有些地方不加‘ ’号。
以上发送的数据可以为js标准类型数据,array,object等。 文档里子组件给父组件传参数描述不清楚,

掌握了以上两点就能写出真正独立于应用的组件,重复使用。