<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>父组件：这是子组件传递过来的数据 --- {{ msg }}</h1>
<!-- 此处的方法 pfn 就是父组件中提供的属性 -->
<!-- pfn 是父组件给子组件提供的一个属性（事件），它的值是父组件中的一个方法 -->
<child v-on:pfn="parentFn"></child>
</div>
<script src="./vue.js"></script>
<script>
// 子组件传递数据给父组件：
// 1 由父组件提供的一个方法（这个方法用来接受子组件传递过来的数据）
// 2 这个方法需要让子组件来调用
// 3 在子组件中调用父组件的方法，将要传递的数据作为 父组件方法的参数 进行传递
// Vue 实例看作是 父组件
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
parentFn( arg ) {
console.log(arg);
this.msg = arg
}
},
// 创建组件
components: {
// 子组件
child: {
props: ['msg', 'abc'],
template: `<button @click="test">子组件传递数据给父组件</button>`,
methods: {
test() {
// 通过 this.$emit 方法来触发事件（此处是，pfn）
// 第二个参数，表示要传递个父组件的数据
// 内部：调用父组件的 parentFn('这是子组件中传递的数据')
this.$emit('pfn', '这是子组件中传递的数据')
}
},
// created() {
// this.$emit('pfn', 'adsfasdfdsfa')
// }
}
}
})
</script>
</body>
</html>
点击按钮的时候完子到父组件的通讯.png
在这里赖活还是好死
在于不在
没那么重要
网友评论