Vue系列之-vue组件之间的传值

本例为父子组件之间最简单的传值

父-子

<div id="editor">
       hello 这里是父亲
         <my-child :message='message' @change='change'></my-child>
</div>
<script>
    Vue.component('MyChild',{
        props:['message'],
        template:'<h3 @click="sonclick">{{message}}</h3>',
    })
        new Vue({
        	el:'#editor',
        	data:{
        		message:'这里是父亲传给儿子的内容',
                son:''
        	},
        })
</script>

子-父

<div id="editor">
       hello 这里是父亲
         <my-child :message='message' @change='change'></my-child>
          <p>{{son}}</p>
</div>
<script>
    Vue.component('MyChild',{
        props:['message'],
        template:'<h3 @click="sonclick">{{message}}</h3>',
        methods:{
            sonclick: function(){
                this.$emit('change','这里是儿子传过来的内容')
            }
        }
    })
    new Vue({
       el:'#editor',
        data:{
          message:'这里是父亲传给儿子的内容',
          son:''
        },
        methods:{
          change(data){
              this.son=data
             }
        }
        	
    })
</script>