vue中父子组件传值

1、父子组件之间传值。
(一)父组件往子组件传值。父组件的数据需要通过props把数据传递给子组件,子组件需要显式的用props选项声明props
子组件:Vue.component('child',{
    props:['message'],
    template:'{{ message }}'
    });
子组件按上述格式将messge声明,那么在父组件中使用该子组件时。
    ,就可以访问父组件中的fdata数据了。将message与fdata绑定

(二)子组件向父组件传值
父组件使用props传递数据给子组件,但是如果子组件要把数据传递回去,就需要使用自定义事件,
使用$on(eventName) 监听事件   $emit(eventName)触发事件
父组件使用v-on:eventName 监听子组件中$emit(eventName)的事件,两者保持一致。
在子组件内部的v-on事件按照正常的事件触发处理。比如:
子组件:Vue.componemt('child',{
    tempalte:''
    })

    methods:{
       son-normalClick: function(){
       this.$emit('eventName');//此处是子组件触发自定义事件的地方,在父组件中使用v-on:eventName 监听事件触发
       }
    }
父组件:
    
    这个的意思就是父组件监听到子组件的触发事件(eventName)后,调用自己的事件方法去处理数据。
    与正常的事件触发不同点是:一般使用v-on:click触发事件,但是在子组件的标签中触发事件就要使用v-on:eventName,与子组件保持
    一致才能监听到子组件中$emit()的事件
    methods:{
       father-normalclick: function(){
       //父组件的处理过程

       }
    }

你可能感兴趣的:(技术,JS,Vue)