组件中props参数的应用

先来段官方文档的代码：

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

props参数是用来父传子的。

在组件定义中采用驼峰式命名法，在父组件中用“-”来中间隔开，变量“myMessage”和“my-message”其实表示的是同一个变量，在定义组件的时候要写成驼峰式命名，在父组件中要用“-”隔开，在父组件中赋值传参进入子组件。

下面举个栗子：

 <div id="app">
        <m-modal modal-title="提醒" v-on:on-ok="ok"></m-modal>
        <m-modal>
            <ul slot="modal-content">
                <li v-for="item of list">{{item}}</li>
            </ul>

            <div slot="modal-footer">
                <span>确定</span>
                <span>重置</span>
                <span>返回</span>
            </div>
        </m-modal>
        <m-modal @on-cancel="cancel"></m-modal>
    </div>

 Vue.component("m-modal",{
            props:{
                modalTitle:{
                    type:String,
                    default:'这是一个模态框'
                }
            },
            template:`
                <div class="modal">
                    <div class="modal-header">
                        <h4>{{modalTitle}}</h4>
                    </div>
                    <div class="modal-content">
                        <div>
                            <slot name="modal-content">在这里添加内容</slot>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <slot name="modal-footer">
                            <input class="btn blue" type="button" value="确定" @click="okHandle" />
                            <input class="btn" type="button" value="取消" @click="cancelHandle" />
                        </slot>
                        
                    </div>
                </div>
            `,
            methods:{
                okHandle(){
                    //通知父组件 点了确定
                    alert("我触发了")
                    this.$emit("on-ok");
                },
                cancelHandle(){
                    alert('取消了');
                    this.$emit('on-cancel')
                }
            }
        });

        var list = [...'妙味课堂'];

        new Vue({
            el:"#app",
            data:{
                list:list
            },
            methods:{
                ok:function (){
                    alert("改变一个div的样式")    
                },
                cancel:function (){
                    alert("取消了，干别的事情")    
                }
            }
        });

     将子组件定义中的modalTitle（默认值为“这是一个模态框”）通过父组件中的属性（modal-title变成父组件中的类似于属性的东东）赋值：modal-title=“提醒”覆盖掉了子组件中的默认值“这是一个模态框”。当父组件中modal-title没有赋值时，采用的是子组件的默认值。

     子组件中的方法methods中的this.$emit("on-ok")，括号里面的参数表示的是子组件事件名，表示的是触发父组件中绑定的事件：v-on:on-ok="ok",ok事件是父组件vue实例中的方法。

     综上所述，子组件中的属性：（1）props参数相当于子组件的属性设置，可以在组件应用时自行设置属性值也可以使用子组件定义时的默认值，父组件传参的作用；（2）methods方法：相当于绑定事件，绑定带有“on-ok”事件所在的作用函数，点击后触发此绑定的作用函数，通过this.$emit("on-ok")和v-on：on-ok=“ok”再触发父组件中的“ok”函数。

渲染结果：