<script type="text/javascript">
///产品组件
Vue.component("school",{
//props指定的值类型
props:['schoolName'],
template:`<li>
<h3>学校名称:{{schoolName}}</h3>
</li>`
})
</script>
静态属性
<school school-name="清华北大"></school>
动态属性
<school :school-name="'上海交大'"></school>//‘’认为是字符串输出
<script type="text/javascript">
//根组件
let app = new Vue({
el:"#app",
data:{
schoolList:['sxt','czbk','xmg']
}
})
</script>
<school :school-name="schoolList[0]"></school>//索引值为0输出
循环传值组件
<school v-for="item, index in schoolList" :school-name="item"></school>
<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>
显示为
监听子组件事件
同时子组件可以通过调用内建的 *** e m i t ∗ ∗ ∗ 方 法 并 传 入 事 件 名 称 来 触 发 一 个 事 件 ∗ emit*** 方法并传入事件名称来触发一个事件 * emit∗∗∗方法并传入事件名称来触发一个事件∗emit尽量不使用驼峰命名,若使用驼峰命名,eg:school-Event = schoolevent