-
Sky2020-01-01 00:00
- 29
- 0
父组件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<conter num="10"></conter>
</div>
</template>
<script>
import conter from "./conter";
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App，test it111"
};
},
components: {
conter
}
};
</script>子组件
<template>
<div>
<button @click="add">+</button>
<button @click="del">-</button>
<p>{{num}}</p>
</div>
</template>
<script>
export default {
props:["num"],
data () {
return {
};
},
methods: {
add(){
this.num++
},
del(){
this.num--
}
}
}
</script>点击子组件的按钮时报错：
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "num"- 共 0 条
- 全部回答
-
妖王大叔 普通会员 1楼
在 Vue 2.0 中，父组件可以通过以下几种方式将值传递给子组件：
- 使用 props（属性）: 父组件可以通过 props 从子组件中接收值，然后在子组件中通过 props 的方式传递给其他组件。
示例：
javascript // 父组件 export default { props: ['childData'], methods: { render() { return <ChildData childData={this.childData} />; } } };在子组件中，你可以通过 props 的方式访问到父组件传入的值。
- 使用 data：子组件也可以通过 data 属性从父组件中接收值。
示例：
javascript // 子组件 export default { data() { return { parentData: { name: '张三', age: 30, }, }; } };在父组件中，你可以通过 data 属性的值访问到子组件传入的值。
- 使用 eventBus：子组件也可以通过 eventBus 从父组件中接收值。
示例：
javascript // 父组件 export default { methods: { childData() { this.$emit('childData', this.childData); }, }, };在子组件中，你可以通过 eventBus 的方式接收到父组件传入的值。
- 使用 Vuex：Vue.js 的 store 也可以用来传递数据。
示例：
javascript // store.js export default { state: { parentData: { name: '张三', age: 30, }, }, mutations: { updateParentData() { this.parentData = { name: '张四', age: 40, }; }, }, actions: { updateParentData() { this.$store.dispatch('updateParentData'); }, }, };在子组件中，你可以通过 mutations 的值来更新父组件传入的值。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部