VUE组件数据父传子,子传父
2021-01-04 本文已影响0人
前端金城武
父组件
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">子传父的值是:{{dd}}</text>
</view>
<!-- 获取子组件数据 给子组件传值 -->
<child @fromChild="getdata" :cc="datachild"></child>
</view>
</template>
<script>
import child from './childComps/child.vue'
export default {
data() {
return {
dd:'',
datachild:'22'
}
},
methods: {
getdata(e){
this.dd = e;
}
},
components:{
child
}
}
</script>
子组件
<template>
<view class="child">
子组件范围<br>
<text>父传子的值是{{cc}}</text>
<button @click="toParent">点击传到父级</button>
</view>
</template>
<script>
export default{
name: 'child',
props:{
cc: String
},
methods:{
toParent(){
this.$emit('fromChild','11')
}
}
}
</script>