如何在Vue.js中捕获组件变化时的props数据

在本文中，我们将看到如何使用Vue.js中的props在组件之间传递不同的数据值，并通过一个示例对props，组件以及其语法有基本的理解。

Vue.js 是一个用于开发用户界面和单页应用程序的开源渐进式JavaScript框架。它由Evan You于2014年创建。Vue.js被设计成易于学习和使用，并已成为市场上最受欢迎的JavaScript框架之一。它有助于将复杂的代码分解为可重用且易于管理的较小组件。

Props 是Vue.js中的一个特殊关键字，表示组件的属性，这些props在组件上定义并从一个组件传递到另一个组件。props是单向传递的，因此大部分情况下数据的传递是从父组件到子组件，这些props是只读的，即它们不能被修改。

组件是小型可重用的代码块，需要props以最大限度地发挥作用。我们可以从一个组件传递数据到另一个组件，而不必为不同的数据重复编写相同的代码，简单来说，它使我们的应用程序更灵活和模块化。

传递props数据： 在Vue.js中，props是从父组件传递到子组件的，这是通过父组件定义v-bind指令来实现的，该指令将数据绑定到props上。现在子组件可以接收props并执行任何操作或渲染它。

语法：

<template>
    <ComponentName :key='key' />
</template>

<script>
    export default {
        data() {
            return {
                key: 'value'
            }
        },
    }
</script>

或者我们可以使用以下语法将静态值与组件名称一起传递：

<ComponentName key="value" />

注意：以上语法是从数据传递给子组件的父组件的语法。现在，子组件的责任是捕获这些props并执行除修改props以外的任何操作。

在Vue.js中，props是在子组件内部使用props属性定义的，该属性以数组作为输入，数组中的每个元素表示子组件将接收的props。

捕获单个props数据： 为了从父组件中捕获单个属性，我们使用以下语法在子组件内部定义props。

语法：

<template>
    <p>你好，{{ username }}</p>
</template>

<script>
    export default {
        props: ['username']
    }
</script>

示例1： 此示例演示了一个名为’username’的prop被从父组件传递给子组件并渲染。

App.vue

<!-- Parent Component -->
<template>
    <div>
        <ChildComponent :username='username' />
    </div>
</template>

<script lang="ts">
    importChildComponent from './ChildComponent.vue';

export default {
    components: {
        ChildComponent
    },
    data() {
        return {
            username: 'GeeksforGeeks',
        }
    }
}
</script>

childcomponent.vue

<template>
    <p>你好，{{ username }}</p>
</template>

<script>
    export default {
        props: ['username']
    }
</script>

<!-- 子组件 -->
<template>
    <div>
        <h1>你好，{{ username }}</h1>
    </div>
</template>
  
<script lang="ts">
    export default {
        props: [
            'username'
        ]
    }
</script>

输出： 从输出中，我们将一个名为username的单个prop从父组件传递给了子组件，并且将分配给username prop的数据渲染出来，如您在输出图像中所见。

如何在Vue.js中捕获组件变化时的props数据

捕获多个prop的数据： 为了从父组件中捕获多个prop，我们使用以下语法在子组件中定义props。

语法：

<template>
    <h1> {title} </h1>
    <h3> {content} </h3>
</template>

<script>
    export default {
        props: [
            'title',
            'content'
        ],
    }
</script>

示例2： 此示例演示了如何捕获由父组件传递和渲染的子组件上命名为’title’和’content’的prop。

App.vue

<!-- 父组件 -->
<template>
    <div>
        <ChildComponent :title='title' 
                        :content='content' />
    </div>
</template>
  
<script lang="ts">
    import ChildComponent from './ChildComponent.vue';
  
    export default {
        components: {
            ChildComponent
        },
        data() {
            return {
                title: 'GeeksforGeeks',
                content: 
'这是一篇关于如何在组件更改时捕获props的文章'
            }
        }
    }
</script>

childcomponent.vue

<!-- 子组件 -->
<template>
    <div>
        <h1> {{title}} </h1>
        <h3> {{content}} </h3>
    </div>
</template>
  
<script lang="ts">
    export default {
        props: [
            'title',
            'content'
        ],
    }
</script>

输出： 从输出中，我们将两个props’ titles’和’content’从父组件传递给子组件，并将分配给这些props的数据渲染出来，如您在输出图像中所见。

如何在Vue.js中捕获组件变化时的props数据