Vue-父传子

当你在Vue.js中开发组件时，有时你需要在不同的组件之间传递数据。一种常见的方式是使用组件的props属性来接收父组件传递的数据。下面我会详细解释这种传值方式的工作原理以及如何使用它。

父组件传递数据

这个示例是父组件跳转到子组件并传值

editTheArticle(article) {

            // 使用Vue Router的导航功能跳转到articlecenter.vue，并传递文章内容
            this.$router.push({
                name: 'EditorArticle', // 假设这是你的路由名称
                params: {article: JSON.stringify(article)} // 传递文章内容
            });
        },

子组件定义props属性

在Vue.js组件中，你可以通过props属性定义组件接受的属性。这些属性可以在组件外部传递给组件，从而让组件能够使用这些数据。

props: {
    article: {
        type: String,
        required: true
    }
}

在这个例子中，我们定义了一个名为article的props属性，它指定了属性的类型为字符串，并且设置了必需属性为true，这意味着在使用这个组件时必须传递一个名为article的属性。

在子组件中使用props数据

一旦你在组件中定义了props属性，你就可以在组件内部通过this访问这些属性。在组件的生命周期钩子函数中，你可以通过this.$props来访问传递给组件的props属性。

data(props) {
    // 使用 JSON.parse() 解析传递的字符串数据为 JavaScript 对象
    const articleObject = JSON.parse(props.article);

    // 使用传递的数据来初始化组件的状态
    return {
        form: {
            title: articleObject.title,
            introduction: articleObject.summary
        },
        dynamicTags: articleObject.tags,
        inputVisible: false,
        inputValue: '',
        articleContent: articleObject.content,
        fileList: [],
        dialogImageUrl: articleObject.image,
        dialogVisible: false,
        articleId: articleObject.id,
    };
}

在这个例子中，我们在组件的data属性中使用了props参数。在组件被创建时，Vue.js会自动将props属性传递给这个data函数，你可以在data函数中访问这些属性并使用它们来初始化组件的状态。

子组件使用传递的数据

一旦你在组件中成功地接收到了props数据并初始化了组件的状态，你就可以在组件的模板中使用这些数据了。

<template>
    <div>
        <h1>{{ form.title }}</h1>
        <p>{{ form.introduction }}</p>
        <!-- 其他组件内容 -->
    </div>
</template>

在这个例子中，我们使用了模板中的插值语法（{{}}）来显示传递的文章标题和简介。

总结

通过定义props属性，你可以在Vue.js组件中轻松地接收来自父组件的数据。一旦你接收到这些数据，你可以在组件内部使用它们来初始化组件的状态，并在模板中渲染这些数据。这种传值方式使得组件之间的数据传递变得简单而直观，有助于构建更加灵活和可复用的Vue.js组件。