prop传值_prop传参到sh

		<script type="text/javascript">
			///产品组件
			Vue.component("school",{
				//props指定的值类型
				props:['schoolName'],
				template:`<li>
					<h3>学校名称:{{schoolName}}</h3>
					</li>`
			})
		</script>
1
2
3
4
5
6
7
8
9
10

静态属性

<school school-name="清华北大"></school>
1

动态属性

<school :school-name="'上海交大'"></school>//‘’认为是字符串输出
1

<script type="text/javascript">
			//根组件
			let app = new Vue({
				el:"#app",
				data:{
					schoolList:['sxt','czbk','xmg']
				}
			})

		</script>
1
2
3
4
5
6
7
8
9
10

<school :school-name="schoolList[0]"></school>//索引值为0输出
1

循环传值组件

<school v-for="item, index in schoolList" :school-name="item"></school>
				
1
2

<script type="text/javascript">
			///产品组件
			Vue.component("school",{
				//props指定的值类型
				props:['schoolName','index'],
				template:`<li>
					<h3>{{index}}-学校名称:{{schoolName}}</h3>
					<button @click="chooseEvent(schoolName)">选择学校</button>
					</li>`,
				methods:{
					chooseEvent:function(schoolName){
						console.log(schoolName)
						//想要将子元素的数据传递给父元素，需要触发事件实现数据的传值
						//触发一个事件名称叫做cSchool的事件
						this.$emit("cschool",schoolName)
					},
					
				}
			})

			//根组件
			let app = new Vue({
				el:"#app",
				data:{
					schoolList:['清华','北大','川农'],
					chooseSchool:""
				},
				methods:{
					changeEvent:function(data){
						console.log("触发学校选择事件")
						this.chooseSchool = data
					}
				}
			})

		</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

显示为

监听子组件事件

同时子组件可以通过调用内建的 ***$emit\ast \ast \ast 方法并传入事件名称来触发一个事件\ast$emit尽量不使用驼峰命名，若使用驼峰命名，eg：school-Event = schoolevent