vue中动态组件使用及传值方式

接下来我会详细讲解“Vue中动态组件使用及传值方式”的完整攻略，包含以下内容：

1. 动态组件的基本使用方法
2. 在父组件中使用动态组件
3. 在子组件中使用 props 传递数据
4. 示例代码说明

1. 动态组件的基本使用方法

Vue中的动态组件可以让我们根据不同的情况加载不同的组件。在 Vue 中使用动态组件非常简单，只需要使用 component 标签，并将 is 属性指向一个变量即可。例如：

<template>
    <div>
        <component :is="currentComponent"></component>
    </div>
</template>

上面的代码中，我们定义了一个 component 标签，并将 is 属性绑定到了 currentComponent 变量上。当 currentComponent 的值发生变化时，component 就会动态的加载不同的组件。

2. 在父组件中使用动态组件

在父组件中使用动态组件需要两个步骤：

1. 确定要加载的组件名称
2. 将该名称赋值给 currentComponent 变量

例如：

<template>
    <div>
        <button @click="loadComponent('Foo')">加载组件 Foo</button>
        <button @click="loadComponent('Bar')">加载组件 Bar</button>
        <component :is="currentComponent"></component>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                currentComponent: ''
            }
        },
        methods: {
            loadComponent (componentName) {
                this.currentComponent = componentName
            }
        }
    }
</script>

上面的代码中，我们定义了两个按钮用于加载不同的组件，在 loadComponent 方法中，我们将要加载的组件名称赋值给了 currentComponent 变量，component 就会动态的加载对应的组件。

3. 在子组件中使用 props 传递数据

父组件可以通过 props 将数据传递给子组件。在子组件中，我们可以通过 props 属性来接收这些数据。例如：

<template>
    <div>{{message}}</div>
</template>

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

上面的代码中，我们定义了一个 props 属性，接收父组件传递过来的 message 数据。在子组件中，我们可以直接使用 message 变量即可。

4. 示例代码说明

<template>
    <div>
        <button @click="loadComponent('Hello')">加载组件 Hello</button>
        <button @click="loadComponent('World')">加载组件 World</button>
        <component :is="currentComponent" :message="helloMessage"></component>
    </div>
</template>

<script>
    import Hello from '@/components/Hello.vue'
    import World from '@/components/World.vue'

    export default {
        data () {
            return {
                currentComponent: '',
                helloMessage: 'Hello, world!'
            }
        },
        methods: {
            loadComponent (componentName) {
                this.currentComponent = componentName
            }
        },
        components: {
            'Hello': Hello,
            'World': World
        }
    }
</script>

上面的代码中，我们定义了两个按钮用于加载不同的组件，使用了动态组件的基本用法。同时也定义了一个名为 helloMessage 的数据，将其通过 props 传递到了子组件中。在子组件中，我们可以直接使用 props 中定义的变量 message 来访问这个数据。

以上就是“Vue中动态组件使用及传值方式”的完整攻略和示例代码说明。