父子传值。created调用两次
时间: 2023-09-12 20:02:42 浏览: 54
在中,父组件向子组件传递数据时,可以使用props属性,子组件通过props来接收父组件传递的数据。而子组件向父组件传递数据时,可以通过$emit方法来触发父组件的事件,并将数据作为参数传递给该事件。以下是一个简单的例子:
父组件:
```
<template>
<div>
<h1>父组件</h1>
<child :message="message" @update-message="updateMessage"></child>
<p>子组件传递的消息:{{ message }}</p>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
message: ''
}
},
methods: {
updateMessage(message) {
this.message = message
}
}
}
</script>
```
子组件:
```
<template>
<div>
<h2>子组件</h2>
<input type="text" v-model="inputValue">
<button @click="sendMessage">发送消息</button>
</div>
</template>
<script>
export default {
props: {
message: {
type: String
}
},
data() {
return {
inputValue: ''
}
},
methods: {
sendMessage() {
this.$emit('update-message', this.inputValue)
}
},
created() {
console.log('子组件created')
}
}
</script>
```
在这个例子中,父组件向子组件传递了一个名为message的props,子组件通过v-model绑定了一个inputValue变量,并通过$emit方法触发了一个名为update-message的事件,并将inputValue作为参数传递给该事件。父组件监听了子组件的update-message事件,并通过updateMessage方法更新了message的值。最后,父组件在模板中展示了message的值。
在控制台中打印created生命周期函数会出现两次的原因可能是因为组件被创建了两次,可以检查一下组件是否被重复使用或者其他原因导致的组件多次创建。