zoukankan      html  css  js  c++  java
  • VUE父子传值的问题

    1. 父子传值 props

    所有的 props 都是单向往下的,父组件 property 更新会影响子组件的,反过来则不会;另外,每次父组件中对应属性发生改变,子组件中的所有 props 都会被更新为最新的值。所以在子组件中,不应该对 props 进行更改

    <div id="app">
        <p>{{ message }}</p>
        <input type="text" v-model="message">
        <child :msg="message"></child>
    </div>
    <template id="child">
        <p>从父组件传来的msg: {{ msg }}</p>
    </template>
    <script>
        Vue.component('child', {
            template: '#child',
            props: ['msg']
        })
        new Vue({
            el: '#app',
            data: {
                message: 'hello props'
            }
        })
    </script>
    

    在线demo

    2. 子组件向父组件传递数据 自定义事件

    使用 v-on
    所有Vue实例都实现了Events接口,即: 通过 $on(eventName) 监听事件 ; 通过 $emit(eventName) 触发事件

    <div id="count">
        <p>{{ total }}</p>
        <count-btn v-on:add="incrementTotal"></count-btn>
        <count-btn v-on:add="incrementTotal"></count-btn>       
    </div>
    <template id="child">
        <div>
            <button @click="add">{{ count }}</button>
        </div>
    </template>
    <script>
        Vue.component('count-btn', {
            template: '#child',
            data () {
                return {
                    count: 0
                }
            },
            methods: {
                add () {
                    this.count++
                    this.$emit('add')
                }
            }
        })
        new Vue({
            el: '#count',
            data: {
                total: 0
            },
            methods: {
                incrementTotal () {
                    this.total++
                }
            }
        })
    </script>




  • 相关阅读:
    SpringBoot 断点调试无效问题解决
    oracle数据库入门
    IPFS入门
    Spring安全参考
    什么是内存泄漏?该如何检测?又该如何解决?
    coredump
    同一个程序在一个系统中可以跑起来,在另外一个系统上跑不起来
    dpkg 强制安装deb文件
    日志文件丢失
    文件句柄资源
  • 原文地址:https://www.cnblogs.com/dillonmei/p/12570662.html
Copyright © 2011-2022 走看看