<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
body{
background-color: #ccc;
}
#app{
width: 400px;
margin: 20px auto;
background-color: #fff;
border:4px solid blueviolet;
border-radius: 1em;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
padding:1em 2em 2em;
}
h3{
text-align: center;
}
.title{
display: flex;
justify-content: space-between;
align-items: center;
border:1px solid #ccc;
padding: 0 1em;
}
.title h4{line-height: 2;margin:0;}
.container{
border:1px solid #ccc;
padding: 0 1em;
}
.btn {
/* 鼠标改成手的形状 */
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<h3>子传父:子组件向父组件传递数据</h3>
<!--
步骤
1. 在父组件中,使用子组时,给它添加自定义事件的监听及回调
@是事件监听。v-on的简写
自定义事件名1: 一般建议用烤串写法写名字
<父组件>
<子组件
@自定义事件名1="处理事件的回调函数,是父组件的方法"
@自定义事件名2="处理事件的函数2">
</子组件>
</父组件>
2. 在子组件中,某个时刻(你自己定义的)主动抛出事件
this.$emit(自定义事件名1, 你要传出去的数据)
这里的this是指子组件。$emit 是系统提供的方法
结果是:当子组件中发生某事时,会调用父组件中的方法
-->
<lao-wang></lao-wang>
</div>
<script>
// 封装一个组件
Vue.component('XiaoWang', {
template: `
<div>
<button @click="hClick">打一下小王</button>
</div>
`,
methods: {
hClick () {
// 在子组件内部抛出事件,则会被父组件监听到,进而调用回调函数h1
// this.$emit
// this就是当前的组件,$emit是这个对象上的一个方法,专用来抛出事件
setTimeout(() => {
// this.$emit('事件名', 附加的数据)
// { name: '小花', action: '打了我' } 这个数据是子组件的
this.$emit('abc', { name: '小花', action: '打了我' })
}, 3000)
}
}
})
Vue.component('LaoWang', {
template: `
<div>
当子组件中发生abc这个事件时,就会执行h1, 同时h1会自动接收参数
<xiao-wang
@abc="h1"
></xiao-wang>
</div>
`,
methods: {
h1 (obj){
// obj会自动接收来自子组件的数据
console.log('是谁打小凡了,出来!!!', obj)
}
}
})
const vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
vue组件:子组件向父组件传递消息及参数说明
最新推荐文章于 2023-03-29 17:08:47 发布