父组件传子组件:父组件定义值,子组件通过props获取,然后渲染
子组件传父组件:子组件中用$emit方法,父组件用获取
子组件:
<template>
<view>
<button type="primary" @click="sendNum">{
{title}}这是test组件,</button>
</view>
</template>
<script>
export default {
data() {
return {
num: 1688
}
},
methods: {
sendNum() {
this.$emit('myEvent', this.num)
}
},
props:['title'],
beforeCreate() {
console.log('实例已经开始初始化了')
},
created() {
console.log('实例初始化完成')
},
beforeMount() {
console.log('before mount')
},
mounted() {
console.log('mounted')
},
onReady() {
console.log('页面初次渲染完成了')
},
destroyed() {
console.log('页面销毁了')
}
}
</script>
<style>
</style>
父组件
<template>
<view class="content">
<test :title="title" @myEvent="getNum"></test>
</view>
</template>
<script>
import test from '../../components/test.vue'
export default {
data() {
return {
title: '传给子组件'
}
},
methods: {
getNum(num) {
console.log(num)
}
},
components: {
test
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>