Vue学习——父组件和子组件，数据交互

对于组件来说，父子组件的传值很重要，但在学习的过程中，对于父组件，子组件经常搞不清楚。在查找很多资料后，个人认为父组件是相对的，在一个组件中用到了其他组件，那么这个组件就是父组件了，被引用的组件就是子组件。

<div id="demo">
			<div>{{pmsg}}</div>
			<menu-item></menu-item>
</div>

Vue.component('menu-item',{
				data:function(){
					return {
						msg:'子组件本身的数据'
					}
				},
				template:'<div>{{msg}}</div>'
			})
			var vm=new Vue({
				el:'#demo',
				data:{
					pmsg:'父组件中的内容',
				}
			})

在其中<menu-item></menu-item>就是组件vm的子组件。

父组件向子组件传值

父组件向子组件传值是通过props属性，可以动态传值也可以静态传值。
props传递数据的原则：单向数据流。

<div id="demo">
			<div>{{pmsg}}</div>
			<menu-item title="来自父组件的静态传值"></menu-item>
			<menu-item :title="dongtai"></menu-item>
</div>

Vue.component('menu-item',{
				props:['title'],
				data:function(){
					return {
						msg:'子组件本身的数据'
					}
				},
				template:'<div>{{msg+"-----"+title}}</div>'	
			})
			var vm=new Vue({
				el:'#demo',
				data:{
					pmsg:'父组件中的内容',
					dongtai:'这是父组件的动态绑定'
				}
			})

子组件向父组件传值

子组件通过自定义事件向父组件传递消息

<button @click='$emit("enlagrge-text" 0.1)'>扩大字体</button>

父组件监听子组件的事件

<menu-item v-on:enlarge-text='fontSize+=$event'></menu-item>

 <div id="app">
        <div :style='{fontSize:fontSize+"px"}'>{{pmsg}}</div>
        <menu-item @enlarge-text='handle($event)'></menu-item>
    </div>

    <script src="js/vue.js"></script>
    <script>
        Vue.component('menu-item', {
            props: ['parr'],
            template: `
            <div>
                <button @click='$emit("enlarge-text",5)'>增加字体</button> 
                <button @click='$emit("enlarge-text",10)'>增加字体</button> 
            </div>
            `
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件的内容',
                fontSize: 10
            },
            methods: {
                handle: function(val) {
                    this.fontSize += val;
                }
            }
        })