zoukankan      html  css  js  c++  java
  • Vue中的组件传值

    1.父传子

    通过props传值
    语法:v-bind:子组件props中的变量名= “父组件中的data中定义的数据”

    • 父组件:
    Vue.component('Father',{
        template: '#father',
        data () {
          return {
            money: 2000
          }
        }
      })
    
    • 子组件:通过props['value'] 接收父组件传递过来的数据,相当于在data中定义了,可以直接使用
    Vue.component('Son',{
        template: '#son',
        // props: ['money']
        // props: { //属性校验
        //   money: Number
        // }
          props: {
            money: {
              validator (val) {
               
                return val > 3000
              }
            }
          }
      })
    

    2.子传父

    • 父组件:<Child @receive= 'receive'/>
    • 子组件:this.emit('receive','传递的数据')

    3.兄弟组件传值

    • 通过vuex进行传值
    • 通过事件总线 let eventBus = new Vue()
    //兄弟1:
    methods:{
      函数名{
       eventBus.emit('自定义事件名',传的数据)
       }
    }
    
    
    //兄弟2:
    created(){
       eventBus.$on('兄弟1发送的自定义的事件名',回调函数)//对数据进行接收
    }
    兄弟2:
    
  • 相关阅读:
    #张祖德#
    不说啥,放题
    ……
    点群的判别(四)
    lougu P4180 【模板】严格次小生成树[BJWC2010]
    20190227模拟
    20190226模拟
    Triangles
    Darling
    Suspenseful
  • 原文地址:https://www.cnblogs.com/my12-28/p/13336082.html
Copyright © 2011-2022 走看看