[Vue] - transfer data from child to parent

【Vue】— The child passes data to the parent

 Insert picture description here

<template>
<div>
<h2>Son</h2>
<div v-for='(item,index) in data' :key='index'>
<div>
<img :src="item.picurl" alt="">
</div>
<div>
<p>{
{
item.title}}</p>
<p>{
{
item.year}} year </p>
</div>
</div>
<p>msg:{
{
msg}}</p>
<p>number:{
{
number}}</p>
<p>user:{
{
obj.user}}</p>
<p>age:{
{
obj.age}}</p>
<p> game :{
{
game}}</p>
<button @click="clickme"> obtain this</button>
<button @click="sendData"> Pass the child data to the parent </button>
<button @click="sendData2">emit()</button>
</div>
</template>
<script>
export default {

data() {

return {

count: '999'
}
},
//props: ['data']
props: {

getdata: Function,
data: Array,
msg: [String, Number, Boolean],
obj: {

type: Object,
required: true,
default: function () {

return {

user: 'admin',
age: 0
}
}
},
number: {

type: [Number, String],
default: 100
},
game: {

validator: function (value) {

let arr = ['CF', ' peace ', 'LOL'];
return arr.indexOf(value) !== -1;
}
}
},
methods: {

clickme() {
},
sendData() {

this.getdata(this.count);
},
sendData2() {

this.$emit('getSonData', this.count, 1, 2, 4);
}
}
}
</script>
<style>
</style>
<template>
<div>
<h2>Parent</h2>
<!-- Transfer data from parent to child -->
<Son :data='arr' msg='msg data ' :obj="obj" :number='number' :game='game' :getdata='getdata'
@getSonData='getSonData' />
</div>
</template>
<script>
import Son from './Son';
export default {

components: {

Son
},
methods: {

getdata(cs) {

console.log(cs);
},
getSonData(...rest) {

console.log(rest);
}
},
data() {

return {

game: 'CF',
number: 1,
obj: {

user: 'Lily',
age: 18
},
arr: [{

title: ' Wang Jia Er ',
year: 2021,
picurl: 'https://pics2.baidu.com/feed/0d338744ebf81a4c633b6aa4fd3a5d5f252da66c.jpeg?token=11476c18354c409e2b80b5c2e6c5d3b1&s=BA8AF205CE6258947A3C2ED903005094'
},
{

title: ' Wang Yibo ',
year: 2020,
picurl: 'https://pics2.baidu.com/feed/0d338744ebf81a4c633b6aa4fd3a5d5f252da66c.jpeg?token=11476c18354c409e2b80b5c2e6c5d3b1&s=BA8AF205CE6258947A3C2ED903005094'
}
]
}
}
}
</script>
<style>
</style>

 Insert picture description here

Please bring the original link to reprint ,thank
Similar articles

2021-08-09

2021-08-09