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

在这篇文章中，我们将看到如何通过props在Vue.js中在组件之间传递不同的数据值，并结合示例基本了解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数据： 为了从父组件中获取一个单独的prop，我们使用以下语法在子组件中定义props。

语法：

<template>
    <p>Hello, {{ username }}</p>
</template>

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

示例 1： 此示例说明了一个名为’username’的prop是如何被子组件捕获的，该prop是从父组件传递并渲染的。

App.vue

HTML

<!-- Parent Component -->
<template> 
    <div> 
        <ChildComponent :username='username' /> 
    </div> 
</template> 
  
<script lang="ts"> 
    import ChildComponent from './ChildComponent.vue'; 
  
    export default { 
        components: { 
            ChildComponent 
        }, 
        data() { 
            return { 
                username: 'GeeksforGeeks', 
            } 
        } 
    } 
</script>

childcomponent.vue

HTML

<!-- Child Component -->
<template> 
    <div> 
        <h1>Hello, {{ username }}</h1> 
    </div> 
</template> 
  
<script lang="ts"> 
    export default { 
        props: [ 
            'username' 
        ] 
    } 
</script>

输出： 从输出中可以看出，我们从父组件向子组件传递了一个名为username的属性，而将数据赋值给username属性后，可以在输出图像中看到该数据的呈现。

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

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

语法：

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

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

示例2： 此示例演示了如何将父组件传递并渲染给子组件的名为“title”和“content”的属性。

App.vue

HTML

<!-- Parent Component -->
<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:  
'This is an article on how to catch props on component change' 
            } 
        } 
    } 
</script>

childcomponent.vue

HTML

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

输出： 从输出中，我们将两个props的标题和内容从父组件传递给子组件，这些props的数据被分配后会像您在输出图像中看到的那样被渲染出来。

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