v-model组件, 动态组件

1.v-model组件

<div id="app">
			1. 触发父组件事件,传数据给父组件, 来修改username, 可以自定义事件属性名
			<input-dom :username="username" @input-parent="changeEvent"></input-dom>
			2.直接改值可以自定义事件属性名
			<input-dom :username="username" @input-parent="username=$event"></input-dom>
			3.v-model ,this.$emit('input', $event.target.value) 必须要为input
			<input-dom v-model="username"></input-dom>
			<h3>{{username}}</h3>
		</div>

		<script>
			Vue.component('input-dom',{
				props:["username"],
				template: `<input type="text" @input="change" :value="username">`,
				methods: {
					change:function($event) {
						// console.log($event);
						this.$emit('input-parent', $event.target.value)//把input设置为触发的事件, $event.target.value是参数 子组件数据传值到父组件
						//this.$emit('input', $event.target.value)//直接使用v-model,要用input作为触发
					}
				}
			})
			let app = new Vue({
				el: '#app',
				data: {
					username: ""
				},
				methods: {
					changeEvent: function(data) {
						// console.log(data)获取到子组件的数据
						this.username = data
					}
				}
			})
			</script>

2.动态组件

按钮可以切换对相应的组件, component标签, 改变is属性的组件名或者对象名
	<div id="app">
			<component :is="com"></component>
			<button @click="changePage(1)">首页</button>
			<button @click="changePage(2)">列表</button>
			<button @click="changePage(3)">新闻</button>
			<button @click="changePage(4)">个人</button>
		</div>
		<script>
			let com1 = Vue.component('index-com', {
				name: "com1",
				template: `<h1>首页</h1>`
			})
			let com2 = Vue.component('list-com', {
				template: `<h1>列表</h1>`
			})
			let com3 = Vue.component('news-com', {
				template: `<h1>新闻</h1>`
			})
			let com4 = Vue.component('person-com', {
				template: `<h1>个人</h1>`
			})
			var app = new Vue({
				el: '#app',
				data: {
					com: 'com1'
				},
				methods:{
					changePage(page) {
						// this.com = "com" + page
						this.com = this.$options.components['com'+page] //已注册组件的对象
					}
				},
				components: {
					com1,com2,com3,com4
				}
			})
		</script>