当我把数据从父组件传递到子组件时，我想知道为什么它不是空的？我想执行Slug操作，但我无法以任何方式解决它。
比如说;
我想捕获子组件中来自axios数据的数据，并为它们采取必要的操作，但据说这个.initialslug值在子组件中是空的，也就是说，在开始时。
ParentComponent.Vue
<template>
<div class="mx-auto flex flex-col">
<div>
<span>title:</span>
<input type="text" v-model="title">
</div>
<div>
<span>Slug:</span>
<Child-component :title="title" :initial-slug="slug"/>
</div>
</div>
</template>
<script>
import ChildComponent from "./ChildComponent.vue";
export default {
name: "Parent",
data() {
return {
title: '',
slug: ''
}
},
components: {ChildComponent},
async created() {
await axios.get(`/categories/4/detail`)
.then((response) => {
this.title = response.data.title
this.slug = response.data.slug
})
}
}
</script>ChildComponent.Vue
<template>
<input type="text" v-model="slug" @input="wasEdited=true">
</template>
<script>
import Slug from "slug";
Slug.defaults.modes['pretty'] = {};
export default {
name: "Child",
props: {
title: {
type: String,
required: true
},
initialSlug: {
type: String,
required: true
}
},
data() {
return {
slug: this.initialSlug,
wasEdited: false,
}
},
methods: {},
mounted() {
this.slug = this.initialSlug
},
created() {
this.slug = this.initialSlug
},
}
</script>我希望我发送的数据被写入段塞值。
2条答案
按热度按时间g6baxovj1#
在
ParentComponent中，您将:initial-slug属性传递给ChildComponent。在ParentComponent中，使用camelCase（slug），但在ChildComponentprop定义中，使用kebab-case（initialSlug）。这可能是初始段塞未正确通过的原因。以下是ParentComponent.Vue中更正后的html代码：
<Child-component :title="title" :initialSlug="slug"/>通过此校正，初始段塞应该正确地从ParentComponent传递到ChildComponent。
nxowjjhe2#
你要做的实际上是一个简单的过程，你应该用
watch来watch它。我们把初始的Slug变成一个函数，传入的数据被分配给所需的slug值。