Vue组件父子传值

父传值到子组件

		<div id="app">
			<ul>
				<school schoolname="清华"></school><!--静态传值-->
				<school :schoolname="'北大'"></school><!-- 动态传值字符串 -->
				<school :schoolname='schoolData[0]'></school><!-- 动态传值变量 -->
				<school v-for="item,index in schoolData" :schoolname='item' :key='"for" + index'></school><!-- 循环传值 -->
			</ul>
		</div>
		
		<script type="text/javascript">
		Vue.component('school',{//创建组件
			props:['schoolname'],//写入属性名.注意驼峰命名法,在标签里面大写字母前面要加"-"
			template:`
				<li>学校名称:{{schoolname}}</li>
			`
		 });
		 var app = new Vue({
				el: "#app",
				data: {
					schoolData: ['清华', '北大', '中大']
				}
			})
		</script>

子组件传值到父元素

		<div id="app">
			<ul>
				<school v-for="item, index in schoolList" :school-name="item" @parentclick="selected"  :key='index + "a"'></school>
			</ul>
			<h2>选中的学校:{{selectedSchool}}</h2>
		</div>
		<script type="text/javascript">
			Vue.component('school', {
				props:['schoolName'],
				template: `
					<li>学校名称:{{schoolName}}
					<button type="button" @click='childClick(schoolName)'>选中</button>
					</li>
				`,
				methods: {
					childClick: function(schoolName) {
						console.log(this)
						this.$emit('parentclick', schoolName)//要在使用的标签加上事件@parentclick="selected", 传入父组件的方法,这里调用该方法, $emit第一个参数是父组件的方法, 第二个开始是给父元素传入的参数
					}
				}
			});
			var app = new Vue({
				el: '#app',
				data: {
					schoolList:['清华','北大','浙大',"中大"],
					selectedSchool:''
				},
				methods: {
					selected: function(school) {
						this.selectedSchool = school
					}
				}
			})
		</script>

子组件通过 $parent 和$root 可以直接访问父元素的数据方法