2021-05-16

Vue中实现组件之间传值

父组件向子组件传值

思路：

1.在子组件的props属性中，自定义需要的属性名 props:['title']

2.在子组件标签中绑定自定义属性，值为父组件数据中的的属性名 :title="ptitle"

代码示例如下：

父组件中：
    <div id="app">
           <base-item :title="ptitle"><base-item>
    </div>


子组件中:
    Vue.component('base-item',{
        props:['title'],
        template:'<div>父组件向子组件传递的数据为：{{title}}</div>',
    };

父组件实例对象中：
    var vm=new Vue({
        data:{
            ptitle:'父组件中的数据',
        }
    });

 

 

子组件向父组件传值

思路：

1.在父组件中为子组件标签绑定自定义事件 @enlarge-text="handle"

2.在子组件模板中定义触发自定义事件 this.$emit('enlage-text',5)

3.在父组件的实例中定义事件处理函数 handle(val){ this.fontSize+=val }

4.在父组件中呈现传递的数据 :style="{fontSize:fontSize+'px'}"

代码示例如下：

父组件中：
    <div :style="{fontSize:fontSize+'px'}">{{pmsg}}</div>
    <base-item @enlarge-text="handle"><base-item>

子组件中：
    template:'<button @click="clickHandle" >点击放大父组件中的文本</button>,
    methods:{
        clickHandle( ){
            this.$emit('enlarge-text',5)
            }
    }

父组件实例中：
    data:{
        pmsg:'父组件中的文本',
        fontSize:10,
     },
    methods:{
        handle(val){
            this.fontSize+=val;
        }
    }

 

 

兄弟组件间值传递

思路：

1.注册事件中心  var hub=new Vue();

2.分别为兄弟组件添加事件  @one_event="handle1"  (以兄弟组件1为例）

3.在各自的方法中触发对方的事件  hub.$emit('two_event',this.msg_one)

4.在各自的生命周期中 完成本身的事件  hub.$on('one_event',(val)=>{ this.meg_from_two=val }）

代码示例：

父组件中：
    <base-one></base-one>
    <base-two></base-two>
  

注册事件中心：
    var hub=new Vue();
    
兄弟组件1：
    Vue.component('base-one',{
        data(){
            return{
                msg_one:'1111111',
                msg_from_two:'',
            }
        },
        template:` <div>组件1从组件2获取的数据：{{msg_from_two}}</div>
                    <button @click="handle1">点击获取组件2数据</button>`,
        methods:{
            handle1(val){
                hub.$emit('two_event',this.msg_one);
            }
        },
        mounted(){
            hub.$on('one_event',(val)=>{
                this.msg_from_two=val;
            })
        }
    });

兄弟组件2：
    Vue.component('base-two',{
        data(){
            return{
                msg_two:'222222',
                msg_from_one:'',
            }
        },
        template:` <div>组件2从组件1获取的数据：{{msg_from_one}}</div>
                    <button @click="handle2">点击获取组件1数据</button>`,
        methods:{
            handle2(){
                hub.$emit('one_event',this.msg_two)
            }
        },
        mounted(){
            hub.$on('two_event',(val)=>{
                this.msg_grom_one=val;
            })
        }
    });