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>          
    

      

  • 相关阅读:
    Spark Streaming 应用实例
    Spark Streaming 应用实例
    利用 Spark Streaming 构建高效健壮的流数据计算系统注意事项
    利用 Spark Streaming 构建高效健壮的流数据计算系统注意事项
    Kafka 集群搭建步骤
    Kafka 集群搭建步骤
    php微信开发-tp5下验证服务器的代码
    php微信公众号开发,入门篇(实现了关注公众号发送欢迎信息,发关键词自回复)
    【php技术】PHP错误类型和屏蔽方法
    自制在线富文本编辑器,精简完整版
  • 原文地址:https://www.cnblogs.com/ruthless/p/10411491.html
Copyright © 2011-2022 走看看