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>          
    

      

  • 相关阅读:
    右建删除.svn
    Oracle 初始化 SEQUENCE附代码
    IE8支付宝密码控件
    JavaScript怎样读取Gridview控件的单元格的值
    IIS7 发布WCF
    C#创建后台服务注意事项
    Sqlserver中传递列参数需要注意的一个小细节
    JavaScript中针对中文参数的转编码
    VS2010里面调试后台服务
    href=#与href=javascriptvoid(0)的区别
  • 原文地址:https://www.cnblogs.com/ruthless/p/10411491.html
Copyright © 2011-2022 走看看