笔记：Vue组件命名、单向数据流修改、父子组件传参props

组件命名错误笔记：

1. 组件在html中必须使用短横线命名法div-msg，不可用驼峰命名

2. template和data（this.xxx）必须使用驼峰命名法divMsg

1. javascript的观察者模式中，使用 dispatchEvent 触发事件 addEventListener监听事件

2. Vue中子组件$emit()来触发父组件事件 $on()监听事件

父子组建传参使用props，但单向数据流不允许子组件直接修改父组件参数，使用props传递参数并在data中克隆即可修改

html和javascript代码分别如下

<div id="app" style='text-align: center;'>
        <p>你的余额{{msg}}</p>
        <newdiv @change = 'changemsg' :msg = 'msg'></newdiv>
    </div>

var vm =new Vue({
        el:'#app',
        data:{
            msg:1000
        },
        methods:{
            changemsg:function(value){
                this.msg =value //此处value就是下面的this.count
            }
        },
        components:{
            'newdiv':{
                props:['msg'],
                data:
                    function(){
                        return{
                            count:this.msg/* 注意this */
                        }
                    },
                template:'<button @click ="clickadd" >+1000</button>',
                methods:{
                    clickadd:function(){
                    this.count=this.count +1000
                    this.$emit('change',this.count) /* 子组件向外触发事件使用$emit */
                    }
                }
            }
        }