zoukankan      html  css  js  c++  java
  • vue 组件之间通信

    父传子

    **父组件代码**
    <template>
        <header-box :title-txt="showTitleTxt"></header-box>
    </template>
    <script>
        import Header from './header'
        export default {
            name: 'index',
            components: {
                'header-box': Header
            },
            data () {
                return {
                    showTitleTxt: '首页'
                }
            }
        }
    </script>

      

    **子组件代码**
    <template>
        <header>
            {{thisTitleTxt}}
        </header>
    </template>
    <script>
        export default {
            name: 'header-box',
            props: {
                titleTxt: String
            },
            data () {
                return {
                    thisTitleTxt: this.titleTxt
                }
            }
        }
    </script>
    

    子传父1

    **子组件代码**
    <template>
        <header>
           <button @click='anniu'></button>
        </header>
    </template>
    <script>
        export default {
            name: 'header-box',
            props: {
                titleTxt: String
            },
            data () {
                return {
                    
                }
            },
                       methods: {
                              anniu(){
                                     this.titleTxt('子组件传来的值')
                              },
                       },
        }
    </script>
    

      

    **父组件代码**
    <template>
        <header-box :title-txt="showTitleTxt"></header-box>
    </template>
    <script>
        import Header from './header'
        export default {
            name: 'index',
            components: {
                'header-box': Header
            },
            data () {
                return {
                    showTitleTxt: '首页'
                }
            },
            methods:{
                 showTitleTxt(a){
                    console.log(a) //子组件传来的值
                },
        
            }
        }
    </script>        
    

    子传父2

    **子组件代码**
    <template>
        <button @click="incrementCounter">{{counter}}</button>
    </template>
    <script>
        export default {
            name: 'button-counter',
            data () {
                return {
                    counter: 0
                }
            },
            metheds: {
                incrementCounter () {
                    this.$emit('increment','子组件传来的值')
                    this.counter++
                }
            }
        }
    </script>
    
    *通过$on,$emit*
    **父组件代码**
    <template>
        <div id="counter-event-example">
          <p>{{ total }}</p>
          <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
    </template>
    <script>
        import ButtonCounter from './buttonCounter'
        export default {
            name: 'index',
            components: {
                'button-conuter': ButtonCounter
            },
            data () {
                return {
                    total: 0
                }
            },
            methods: {
                incrementTotal (a) {
                    console.log(a) //子组件传来的值
                    this.total++
                }
            }
        }
    </script>          
    

      

  • 相关阅读:
    消息队列系列——启蒙(一)
    重新整理数据结构与算法(c#)—— 图的深度遍历和广度遍历[十一]
    重新整理数据结构与算法——八皇后问题解决[十]
    重新整理数据结构与算法——迷宫算法[九]
    重新整理数据结构与算法——逆波兰表达计算器[八]
    lowdb 在electron 使用中注意的问题
    apollo客户端springboot实战(四)
    apollo在liunx环境实战(三)
    apollo入门demo实战(二)
    设计模式总结
  • 原文地址:https://www.cnblogs.com/ruthless/p/10411491.html
Copyright © 2011-2022 走看看