子组件向父组件发送数据
直接分二步
一. 在子组件数据发生改变时或者改变后的触发函数中,提交要发送的数据,格式如下:
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,并把数据传递给后面的函数,也就是调用这个函数,每次数据更新都会调用这个函数。
父组件向子组件传递数据,比较简单。
也是分二步
三. 在父组件中发送这些数据 格式如下:
:key='data'>
key 还是为字符串标识,data为发送的数据
四. 在子组件中接受这些数据 格式如下:
props:[‘key’]
可以用在模板
<template>
<p>{{key}}p>
template>
也可以在js里使用
methods:{
fun(){
this.$props.key
}
}
注意有些k在有些地方不加‘ ’号。
以上发送的数据可以为js标准类型数据,array,object等。 文档里子组件给父组件传参数描述不清楚,
掌握了以上两点就能写出真正独立于应用的组件,重复使用。