零。官方文档
一。父组件给子组件传值
父组件
<template> <view class="content"> <login :title="title"></login> </view> </template> <script> import login from '../../components/login/login.vue' export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: {}, components: { login } } </script>
子组件
<template> <view> <view>组件</view> <view>{{title}}</view> </view> </template> <script> export default { data() { return {}; }, props:['title'] } </script>
二。子组件给父组件传值 $emit()
父组件
<template> <view class="content"> <login :title="title" @myEvem="get_num"></login> {{num}} </view> </template> <script> import login from '../../components/login/login.vue' export default { data() { return { title: 'Hello', num: 0 } }, methods: { get_num(num) { console.log("收到") console.log(num) } }, components: { login } } </script>
子组件
<template> <view> <view>组件</view> <view>{{title}}</view> <button @click="send_father">send_father</button> </view> </template> <script> export default { data() { return { intId: null, num: 3 }; }, props: ['title'], methods: { send_father() { console.log("开始传值") this.$emit('myEvem', this.num) } }, created() { console.log("1") this.intId = setInterval(() => { console.log("执行定时器") }, 1000) }, destroyed() { clearInterval(this.intId) } } </script>
三。兄弟组件通讯
login.vue
<template> <view> <view>组件</view> <view>{{title}}</view> <button @click="send_father">send_father</button> <button @click="update_register">update_register</button> </view> </template> <script> export default { data() { return { intId: null, num: 3 }; }, props: ['title'], methods: { send_father() { console.log("开始传值") this.$emit('myEvem', this.num) }, update_register() { uni.$emit('update_num', 10) console.log() } }, } </script>
register.vue
<template> <view> 注册:{{from_login}} </view> </template> <script> export default { data() { return { from_login: null } }, created() { uni.$on('update_num',num=>{ this.from_login += num }) } } </script>