在Vue中，`<component>` 组件用于
动态切换组件。
动态传值是指在切换组件时，向不同的组件
传递相应的数据。以下是几种常见的
动态传值方法：
#### 通过 `v-bind` 绑定数据
在使用 `<component>` 时，可以使用 `v-bind` 指令将数据
动态地
传递给当前激活的组件。例如：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--
动态组件，绑定数据 -->
<component :is="currentComponent" :message="dynamicMessage"></component>
<
button @
click="changeComponent">切换组件</
button>
</div>
<script src="./node_modules/vue/dist/vue.
js"></script>
<script>
var compA = {
props: ['message'],
template: `
<div>
组件A接收到的消息: {{ message }}
</div>
`
};
var compB = {
props: ['message'],
template: `
<div>
组件B接收到的消息: {{ message }}
</div>
`
};
new Vue({
el: '#app',
data() {
return {
currentComponent: 'compA',
dynamicMessage: '初始消息'
};
},
components: {
compA,
compB
},
methods: {
changeComponent() {
this.currentComponent = this.currentComponent === 'compA' ? 'compB' : 'compA';
this.dynamicMessage = '新消息';
}
}
});
</script>
</body>
</html>
```
在这个例子中，`dynamicMessage` 是一个
动态的数据，通过 `v-bind`
传递给当前激活的组件。当点击按钮切换组件时，`dynamicMessage` 也会更新，新的消息会
传递给新的组件。
#### 结合计算属性
传值
可以使用计算属性来
动态生成要
传递的数据。例如：
```javascript
new Vue({
el: '#app',
data() {
return {
currentComponent: 'compA',
baseMessage: '基础消息'
};
},
components: {
compA,
compB
},
computed: {
computedMessage() {
return this.baseMessage + ' 经过计算';
}
},
methods: {
changeComponent() {
this.currentComponent = this.currentComponent === 'compA' ? 'compB' : 'compA';
}
}
});
```
在模板中使用计算属性
传值：
```html
<component :is="currentComponent" :message="computedMessage"></component>
```
这里，`computedMessage` 是一个计算属性，根据 `baseMessage`
动态生成要
传递给组件的数据。
#### 结合
事件传值
除了通过 `v-bind`
传递数据，还可以通过
事件来实现
动态传值。例如，子组件触发一个
事件，父组件监听该
事件并更新
传递给 `<component>` 的数据。
子组件 `compA` 示例：
```javascript
var compA = {
props: ['message'],
template: `
<div>
组件A接收到的消息: {{ message }}
<
button @
click="sendNewMessage">发送新消息</
button>
</div>
`,
methods: {
sendNewMessage() {
this.$emit('new-message', '子组件发送的新消息');
}
}
};
```
父组件监听
事件并更新数据：
```javascript
new Vue({
el: '#app',
data() {
return {
currentComponent: 'compA',
dynamicMessage: '初始消息'
};
},
components: {
compA,
compB
},
methods: {
handleNewMessage(newMsg) {
this.dynamicMessage = newMsg;
}
}
});
```
在模板中监听
事件：
```html
<component :is="currentComponent" :message="dynamicMessage" @new-message="handleNewMessage"></component>
```
当子组件 `compA` 中的按钮被点击时，会触发 `new-message`
事件，父组件监听该
事件并更新 `dynamicMessage`，从而实现
动态传值。
本文提供了一个简单的JavaScript示例，展示了如何使用onclick属性为按钮元素添加点击事件处理程序，并调用名为show的函数来响应用户交互。
扫一扫
839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
