Vue组件传值

组件传值

• 父组件传值步骤
  • 引入子组件
  • 去components中注册一下
  • 在div中写入你注册的组件名

    <son ref="方法"></son>
    import son from './son.vue'
    
    components:{
        son
    }
    mounted:{
        //调用子组件中的方法
        this.$refs.方法.子组件中的方法()
    }
    

    • 向子组件中传入数据
    • 父组件

    <son :自定义属性="自定义名"></son>
    //子组件中
    <div>{{ 自定义属性 }}</div>
    
    popos:['自定义属性']
    

    • 子组件传值

    //父组件
    <son :自定义属性="自定义名"@自定义点击属性名="点击方法('子组件传过来的值')"></son>
    methods:{
        点击方法('子组件传过来的'){
            console.log(子组件传过来的)
        }
    }
    //子组件
    <button @click="自定义方法名">点击传值</button>
    
    methods:{
        自定义方法名(){
            this.$emit('父组件中自定义点击属性名'，你想要传过去的值)
        }
    }
    

兄弟组件传值

• 步骤

  • 创建bus.js文件

    import Vue from 'vue' 
    export default new Vue() 
  

  • 大哥组件
    • 引入bus.js文件

        import bus from '@/bus.js'
        传
        bus.$emit('自定义属性','传的值') 
  

  • 兄弟组件
    • 引入bus.js文件

    import bus from '@/bus.js'
    接
    bus.$on("firstMsg", res => {
      this.modsa = res;
      console.log(this.msgsss);
    });