子传父如何设定默认值
时间: 2024-04-28 13:24:44 浏览: 56
在子组件向父组件传递数据时,你可以通过自定义事件和 props 来实现。要设定默认值,你可以在子组件内部使用 `default` 属性来设置 props 的默认值。下面是一个示例代码:
父组件:
```vue
<template>
<div>
<p>父组件中的值:{{ selectedValue }}</p>
<child-component v-on:selected="updateSelectedValue" :default-value="selectedValue"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
selectedValue: '默认值'
};
},
methods: {
updateSelectedValue(value) {
this.selectedValue = value;
}
}
};
</script>
```
子组件:
```vue
<template>
<div>
<p>子组件中的值:{{ inputValue }}</p>
<button @click="emitSelectedValue">传递值给父组件</button>
</div>
</template>
<script>
export default {
props: {
defaultValue: {
type: String,
default: '默认默认值'
}
},
data() {
return {
inputValue: this.defaultValue
};
},
methods: {
emitSelectedValue() {
this.$emit('selected', this.inputValue);
}
}
};
</script>
```
在上面的代码中,父组件中使用 `child-component` 自定义标签引入了子组件,并通过 `v-on:selected` 监听子组件触发的自定义事件 `selected`。父组件中的 `selectedValue` 作为一个 prop 传递给子组件的 `defaultValue` 属性。子组件中使用 `defaultValue` 设置了 `inputValue` 的默认值,并在点击按钮时通过 `$emit` 触发了 `selected` 事件,将 `inputValue` 的值传递给父组件。
这样,子组件在初始化时会使用父组件传递的默认值,如果需要修改默认值,可以在父组件中更新 `selectedValue`,子组件会相应地更新。