Vue组件间数据交互

props属性名的命名规则

在props中使用驼峰形式命名，在模板中(html中)使用的时候需要使用对应的短横线名，因为在DOM中名字是不区分大小写的。但是在字符串形式的模板中(js中)没有这个限制。

props属性值类型的细节问题

在传递number和boolean类型的时候，属性绑定的方式才可以传递原始类型的值，不然都是string类型。

<menu-item title-value='12'></menu-item>
<menu-item :title-value='10'></menu-item>

Vue.component('menu-item',{	//定义一个子组件
	props: ['titleValue'],	// 接收来自父组件的值
	template:`
		<div>{{typeof titleValue}}</div>	// title-value='12'---String
		<div>{{typeof titleValue}}</div>	// :title-value='10'---number
	`
});
// boolean类型同理

父组件向子组件传值

// 子组件内部通过props属性接收由父组件传递过来的值
Vue.component('menu-item',{	//定义一个子组件
	props: ['titleValue'],	// 接收来自父组件的值
	template:`
		<div>{{ titleValue}}</div>	// 接收到的值可以直接使用
	`
});

// 父组件使用子组件时向他传递参数的方式：静态方式和属性绑定方式
<menu-item title-value="由父组件向子组件传递的值"></menu-item>
<menu-item :title-value="title"></menu-item>	//titleValue可以定义在模板数据里动态传值

子组件向父组件传值

父组件向子组件传值是通过props单向数据流方式；子组件向父组件传值是通过自定义事件的方式；

Vue.component('menu-item',{	//定义一个子组件
	props: [],	// 接收来自父组件的值
	// $emit子组件点击触发事件，名字是固定的；第一个参数enlarge-text事件名字，是自定义的;第二个参数12是子组件向父组件传递的数据；
	template:`
		<button v-on:click='$emit("enlarge-text",12)'></button>		
	`
});
//在父组件中监听
<div id="app">
	<menu-item @enlarge-text='handle($event)'></menu-item>	//在父组件中$event接收子组件传来的参数12
</div>
var vm = new Vue({
	el: #app,
	data: {},
	methods: {
		handle: funcation(value){
			console.log(value);		// 12
		}
	}
});

非父子组件的数据交互

非父子组件的数据交互使用事件中心方式

// 事件中心
var eventHub = new Vue();

Vue.component("test-tom", {
        data: funcation(){
            return {
                num: 0
            }
        },
        template: `
            <div>
                <div>TOM: {{num}}</div>
                <div>
                    <button @click='handle'>点击使JERRY增加2</button>
                </div>
            </div>
        `,
        methods: {
            handle: funcation(){
                // 触发想要交互的对方正在监听的事件
                eventHub.$emit('jerry-event',2);
            }
        },
        mounted: function () {
            // 模板就绪，监听事件
            eventHub.$on('tom-event',(value) -> {
                this.num = value;
            });     // 监测到tom-event事件触发的时候执行函数
        }
    });
    Vue.component("test-jerry", {
        data: funcation(){
            return {
                num: 0
            }
        },
        template: `
            <div>
                <div>JERRY: {{num}}</div>
                <div>
                    <button @click='handle'>点击使TOM增加1</button>
                </div>
            </div>
        `,
        methods: {
            handle: funcation(){
                // 触发想要交互的对方正在监听的事件
                eventHub.$emit('tom-event',1);
            }
        },
        mounted: function () {
            // 模板就绪，监听事件
            eventHub.$on('jerry-event',(value) -> {
                this.num = value;
            });     // 监测到tom-event事件触发的时候执行函数
        }
    });