1.第一行是子组件部分,全部是 父组件部分,将子组件嵌套。要求点击子组件的send按钮能在第二行显示子组件input 里面的消息。
子组件的点击事件如何操作父组件里面的数据,并且将子组件中input中的消息传递到父组件的data呢 ,这是一个核心问题。
2.vm.$emit( eventName, […args] )
,可以触发父组件中定义的事件,并可以将子组件的数据通过传参的方式传递到父组件。具体怎么利用它解决核心问题呢。
3.子组件的点击事件无法操作到父组件里面的数据,但是可以利用$emit
触发父组件中定义的事件,再利用父组件中定义的事件操作父组件里面的数据。
4.接下来是具体操作:
先要在父组件上定义子组件事件,然后定义触发事件要执行的方法,该方法要有一个参数,用来接收子组件传递过来的数据,该方法要实现将传递过来的参数赋值给要操作的变量,也就是实现对父组件数据的操作。
上述完成后,可以知道触发这个在父组件上定义的事件就可以了,于是在子组件的点击事件里用vm.$emit( eventName, […args] )触发父组件上定义的事件且传递参数即可。
完整示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<template id="child">
<div>
<button @click="click">Send</button>
<input type="text" v-model="message">
</div>
</template>
<script>
Vue.component('parent', {
template: '<div><child @childFn="transContent"></child>' +
'子组件传来的值 : {{message}}</div>',
data () {
return {
message: ''
}
},
methods: {
transContent (payload) {
this.message = payload
}
}
})
// child组件
Vue.component('child', {
template: '#child',
data () {
return {
message: '子组件的消息'
}
},
methods: {
click () {
this.$emit('childFn', this.message);
}
}
})
var vm = new Vue({ el: '#app' })
</script>
</body>
</html>