Vue2.0 :父子传值、非父子组件传值方式

 

一.父子组件通讯

1、父组件中如何集成子组件

    1.1、定义子组件

    1.2、在父组件导入并且注册子组件

    1.3、在父组件的template中使用即可

​2、父组件如何传值给子组件【通过Props】

    传值方(父组件)

        <child 属性名称=值 属性名称2=值2>

    接收方(子组件)

        props

​3、子组件如何传值给父组件【通过自定义事件】

    传值方(子组件)

        this.$emit('事件名称',载荷)

    接收方(父组件)

        使用子组件的时候，注册自定义事件，并且写好处理函数，通过处理函数的形参来接收子组件传递过来的载荷

二.非父子组件传值【使用公共的Vue实例传值】

      1、创建一个公共的Vue实例

      2、在传值的那一方（login.vue）

            调用公共Vue对象的.$emit('自定义事件',载荷)

      3、在接收值的那一方(App.vue)

            调用公共Vue对象的.$on('自定义事件',(形参)=>{

                           })