parent
a7eee22755
commit
590facbd52
7 changed files with 199 additions and 6 deletions
@ -0,0 +1,64 @@ |
||||
<template> |
||||
<div class="app"> |
||||
<h1>{{ msg }}{{stuName}}</h1> |
||||
<!-- 通过父组件给子组件传递函数，间接获取子组件数据 --> |
||||
<School :getSchoolName="getSchoolName"/> |
||||
<!-- 通过父组件给子组件绑定一个自定义事件，实现给父传递数据，使用v-on或@方式 --> |
||||
<!-- <Student v-on:studentName="getStudentName"/>--> |
||||
<Student @studentName="getStudentName" @demo="method1" @click.native="show"/> |
||||
<!-- <Student @studentName.once="getStudentName"/>--> |
||||
<!-- 通过父组件给子组件绑定一个自定义事件，实现给父传递数据,使用ref方式 --> |
||||
<!-- <Student ref="student"/>--> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import School from "./components/School.vue"; |
||||
import Student from "./components/Student.vue"; |
||||
|
||||
export default { |
||||
name: "App", |
||||
components: { |
||||
School, |
||||
Student |
||||
}, |
||||
data() { |
||||
return { |
||||
msg: "Hello:", |
||||
stuName: "" |
||||
} |
||||
}, |
||||
methods: { |
||||
getSchoolName(schoolName) { |
||||
console.log("获取学校名称", schoolName) |
||||
}, |
||||
getStudentName(name, ...params) { |
||||
console.log("getStudentName", name, params) |
||||
this.stuName = name |
||||
}, |
||||
method1() { |
||||
console.log("demo自定义事件被调用！") |
||||
}, |
||||
show() { |
||||
alert("组件点击事件") |
||||
} |
||||
}, |
||||
mounted() { |
||||
// 正常写法 |
||||
// this.$refs.student.$on("studentName", this.getStudentName) |
||||
// 可以设置只执行一次 |
||||
// 可以加延时 |
||||
// this.$refs.student.$once("studentName", this.getStudentName) |
||||
// setInterval(() => { |
||||
// this.$refs.student.$on("studentName", this.getStudentName) |
||||
// }, 3000) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.app { |
||||
background-color: gray; |
||||
padding: 15px |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,35 @@ |
||||
<template> |
||||
<div class="school"> |
||||
<h2>学校名称：{{ name }}</h2> |
||||
<h2>学校地址：{{ address }}</h2> |
||||
<!-- 通过父组件给子组件传递函数，间接获取子组件数据 --> |
||||
<button @click="sendSchoolName">把学校名称传给App</button> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
name: "School", |
||||
props: ["getSchoolName"], |
||||
data() { |
||||
return { |
||||
name: "修仙学院", |
||||
address: "长白山", |
||||
} |
||||
}, |
||||
methods: { |
||||
sendSchoolName() { |
||||
this.getSchoolName(this.name) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.school { |
||||
background-color: skyblue; |
||||
padding: 15px |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,52 @@ |
||||
<template> |
||||
<div class="student"> |
||||
<h2>学生名称：{{ name }}</h2> |
||||
<h2>学生年龄：{{ age }}</h2> |
||||
<h2>当前序号：{{number}}</h2> |
||||
<button @click="sendStudentName">把学生名称传给App</button> |
||||
<button @click="unbind">解绑studentName事件</button> |
||||
<button @click="death">销毁当前Student组件的实例</button> |
||||
<button @click="num">number+1</button> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "Student", |
||||
data() { |
||||
return { |
||||
name: "小强", |
||||
age: 18, |
||||
number: 0 |
||||
} |
||||
}, |
||||
methods: { |
||||
sendStudentName() { |
||||
// 触发Student组件实例上的studentName事件 |
||||
this.$emit("studentName", this.name, 666, 777, 888) |
||||
this.$emit("demo") |
||||
}, |
||||
unbind() { |
||||
// this.$off("studentName") // 解绑单个自定义事件 |
||||
this.$off(["studentName", "demo"]) // 解绑多个自定义事件 |
||||
this.$off() // 解绑全部自定义事件 |
||||
}, |
||||
death() { |
||||
this.$destroy() // 销毁当前Student组件的实例 |
||||
}, |
||||
num() { |
||||
console.log("num被调用") |
||||
this.number++ |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="css" scoped> |
||||
.student { |
||||
background-color: pink; |
||||
padding: 15px; |
||||
margin-top: 20px; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,16 @@ |
||||
// 引入Vue
|
||||
import Vue from "vue"; |
||||
// 引入App
|
||||
import App from "./App"; |
||||
|
||||
// 设置Vue
|
||||
Vue.config.productionTip = false |
||||
|
||||
|
||||
// 实例化Vue
|
||||
new Vue({ |
||||
components: { |
||||
App |
||||
}, |
||||
render: h => h(App) |
||||
}).$mount('#app') |
||||
Loading…
Reference in new issue