web前端vue组件和父子之间传值

什么是vue组件？
组件（Component）是vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码。
组件的注册使用如下，其中button-counter是组件名称，以HTML形式使用

<div id="app">
    <!-- 组件的使用 -->
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    Vue.component('button-counter', {
      data: function(){
        return {
          count: 0
        }
      },
      template: '<button @click="handle">点击了{{count}}次</button>',
      methods: {
        handle: function(){
          this.count += 2;
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>

父组件给子组件传值：
父组件发送的形式是以属性的形式绑定值到子组件身上；
然后子组件用属性props接收；
在props中使用驼峰形式，模板中需要使用短横线的形式。

<div id="app">
    <div>{{pmsg}}</div>
    <menu-item title='来自父组件的值，通过属性的方式传递'></menu-item>
    <menu-item :title='ptitle'></menu-item>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
    /*
        父组件向子组件传值
    */
    Vue.component('menu-item',{
        props: ['title'],
        data: function(){
            return {
                msg: '子组件本身的数据'
            }
        },
        template:'<div>{{msg + "-------" + title}}</div>'
    })
    var vm = new Vue({
        el:'#app',
        data: {
            pmsg: '父组件中内容',
            ptitle: '动态绑定属性'
        }
    });
    </script>

子组件给父组件传值：
props传递数据原则：单向数据流,所以子组件向父组件传值的本质是自定义事件

<div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
    <menu-item :parr='parr' @enlarge-text='handle'></menu-item>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
    Vue.component('menu-item',{
        props:['parr'],
        template:`
        <div>
        <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
        </ul>
            <button @click='$emit("enlarge-text")'>扩大父组件中字体的大小</button>
        </div>
        `
    });
    var vm = new Vue({
        el:'#app',
        data:{
            pmsg:'父组件中内容',
            parr: ['苹果','桔子','香蕉'],
            fontSize: 10
        },
        methods:{
            handle: function(){
                //扩大字体大小
                this.fontSize += 5;
            }
        }
    });
    </script>