Vue组件之间传值

1.Vue组件之间传值

1.1父组件向子组件传值

　　1.组件内部通过props接收传递过来的值

 

 

 

　　2.父组件通过属性将值传递给子组件

 

 

 

  • 父组件发送的形式是以属性的形式绑定值到子组件身上。

  • 然后子组件用属性props接收

  • 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制

     <div id="app">
    <div>{{pmsg}}</div>
     <!--1、menu-item  在 APP中嵌套着 故 menu-item   为  子组件      -->
     <!-- 给子组件传入一个静态的值 -->
    <menu-item title='来自父组件的值'></menu-item>
    <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle  来自父组件data 中的数据 . 
          传的值可以是数字、对象、数组等等
    -->
    <menu-item :title='ptitle' content='hello'></menu-item>
  </div>
​
  <script type="text/javascript">
    Vue.component('menu-item', {
      // 3、 子组件用属性props接收父组件传递过来的数据  
      props: ['title', 'content'],
      data: function() {
        return {
          msg: '子组件本身的数据'
        }
      },
      template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        ptitle: '动态绑定属性'
      }
    });
  </script>

     



3.props属性名规则


 在props中使用驼峰形式，模板中需要使用短横线的形式 


 字符串形式的模板中没有这个限制






<body>
    <div id="app">
        <!-- <div>{{msg}}</div> -->
        <!-- <menu-item title="来自父组件中的内容"></menu-item> -->
        <!-- 在props中使用驼峰形式，模板中需要使用短横线的形式 -->
        <menu-item :menu-Item='emsg'></menu-item>
​
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component('third-item', {
            props: ['textItem'],
            template: '<div>{{textItem}}</div>'
        });
        Vue.component('menu-item', {
            props: ['menuItem'],
            // 字符串形式的模板中没有这个限制
            template: '<div>{{menuItem}}<third-item textItem="hello"></third-item></div>'
        });
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件',
                emsg: '我是动态绑定属性',
                pmsg: 'abc'
            },
            methods: {
​
            }
        })
    </script>
</body>




 




1.2子组件向父组件传值


　　1.子组件通过自定义事件向父组件传递信息


　　　　<button @click='$emit("enlarge-text",5)'>扩大父组件中内容的字体大小</button>


　　2.父组件监听子组件的事件


　　　　<menu-item :msg='msg' @enlarge-text='handel($event)'></menu-item>


    

  • 

    子组件用$emit()触发事件
    

    • 

  • 

    $emit()  第一个参数为 自定义的事件名称     第二个参数为需要传递的数据
    

    • 

  • 

    父组件用v-on 监听子组件的事件
    

    • 





<body>
    <div id="app">
​
        <div :style='{fontSize: fontSize + "px"}'>{{msg}}</div>
        <!-- 2 父组件用v-on 监听子组件的事件
        这里 enlarge-text  是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数 
    -->
        <menu-item :msg='msg' @enlarge-text='handel($event)'></menu-item>
    </div>
    <script src="vue.js"></script>
    <script>
        /*
      子组件向父组件传值-携带参数
    */
        Vue.component('menu-item', {
            props: [],
            /* 
                 1、子组件用$emit()触发事件
                第一个参数为 自定义的事件名称   第二个参数为需要传递的数据
             */
            template: `
                <div> 
                   <button @click='$emit("enlarge-text",5)'>扩大父组件中内容的字体大小</button>
                   <button @click='$emit("enlarge-text",12)'>扩大父组件中内容的字体大小</button>
                
                </div>
            `
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件中的内容',
                fontSize: 10
            },
            methods: {
                handel: function (val) {
                    // 扩大字体大小
                    this.fontSize += val;
                }
            }
        })
    </script>
</body>
​




 


1.3非父子组件间传值-兄弟之间的传递


　　1.单独的事件中心管理组件间的通信


  　　　　var hub = new Vue();


　　2.监听事件与销毁事件


 　　　　hub.$on('jerry-event', jerryEvent)


  　　　　hub.$off('jerry-event');




 


 


    

  • 

    兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据   
    

      

    • 

      提供事件中心    var hub = new Vue()
      

      • 

    

    • 

  • 

    传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
    

    • 

  • 

    接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名
    

    • 

  • 

    销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
    

    • 





<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>
            <button v-on:click="handel">销毁事件</button>
        </div>
        <tom-item></tom-item>
        <jerry-item></jerry-item>
    </div>
    <script src="vue.js"></script>
    <script>
        /* 兄弟组件之间的传递 */
        //1、 提供事件中心
        var hub = new Vue();
        Vue.component("tom-item", {
            data: function () {
                return {
                    num: 0
                }
            },
            template: `
                <div>
                    <span>Tom:{{num}}</span>
                    <div>
                        <button @click='handel'>点击</button>
                    </div>
                </div>
            `,
            methods: {
                handel: function () {
                    //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
                    hub.$emit('jerry-event', 1);
                }
            },
            mounted: function () {
                // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名
                hub.$on('tom-event', (val) => {
                    this.num += val;
                })
            }
        });
        Vue.component("jerry-item", {
            data: function () {
                return {
                    num: 0
                }
            },
            template: `
                <div>
                    <span>Jerry:{{num}}</span>
                    <div>
                        <button @click='handel'>点击</button>
                    </div>
                </div>
            `,
            methods: {
                handel: function () {
                    hub.$emit('tom-event', 2)
                }
            },
            mounted: function () {
                // 监听事件
                hub.$on('jerry-event', (val) => {
                    this.num += val;
                })
​
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件'
            },
            methods: {
                handel: function () {
                    //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据  
                    hub.$off('tom-event');
                    hub.$off('jerry-event');
                }
            }
        })
    </script>
</body>




 






            

            
posted @ 
2020-12-03 16:29 
행운의소녀 
阅读(275) 
评论(0) 
 
收藏 
举报