< 返回技术文档列表

如何理解vue父子传值,兄弟传值,子父传值

发布时间:2021-11-07 00:34:49

本篇内容主要讲解“如何理解vue父子传值,兄弟传值,子父传值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何理解vue父子传值,兄弟传值,子父传值”吧!

    一、父组件向子组件传值

    1.父组件.vue

    // 父组件中
    <template>
        <div>
            <Child ref="child" :title="value"/>
        </div>
    </template>    
    <script>
    export default {
        data() {
        	return {
        		value: 'hello world!'
        	}
        }
    }
    </script>

    2.子组件.vue

    // 父组件中
    <template>
        <div>
           <span>{{title}}</span>    
        </div>
    </template>    
    <script>
    export default {
      props: {
        title: {
          	type: String,
          	default: ''
        }
      }
    }
    </script>

    //title值为'hello world!

    二、兄弟组件间传值还可以通过中间件Bus

    $emit 传值

    $on 接收

    $off 删除传输事件

    1.A组件.js

    this.$bus.$emit("flag",true)

    2.B组件.js

    mounted() {
        this.$bus.$off('flag')
        this.$bus.$on('flag', data=> {
          this.flag= data
        })
      }

    三、子组件向父组件传值

    1.父组件.js

    <template>
        <div>
            <Child ref="child" @getTitle="getTitle"/>
        </div>
    </template>  
    <script>
    import Child from './components/Child'
    export default {
      components: {
      	Child 
      },
      data() {
        return {
        }
      },
      method:{
      	getTitle(data){
    		console.log(data)
    	}
      }
    }
    </script>

    打印结果为 hello xuliting

    2.子组件.js

    <template>
        <div>
           <span>{{title}}</span> 
        </div>
    </template>    
    <script>
    export default {
      data() {
        return {
        title: 'hello xuliting'
        }
      },
      mounted(){
        this.getFun()
      },
      method:{
        getFun(){
         this.$emit("getTiltle",this.title)
        }
      }
    }
    </script>

    到此,相信大家对“如何理解vue父子传值,兄弟传值,子父传值”有了更深的了解,不妨来实际操作一番吧!这里是血鸟云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


    /template/Home/Zkeys/PC/Static