zoukankan      html  css  js  c++  java
  • uni-app-组件通信

    零。官方文档

    一。父组件给子组件传值

    父组件

    <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>
  • 相关阅读:
    高性能无锁队列,代码注释
    阿里mysql同步工具otter的docker镜像
    webgl鱼眼算法
    国际网络环境对库的影响
    newlisp
    java面试之数据库
    java面试之遇到过的问题
    java面试之springboot
    git常用命令
    java面试之jenkins
  • 原文地址:https://www.cnblogs.com/fwjlucifinil/p/13608942.html
Copyright © 2011-2022 走看看