vue组件通信
一.父组件传递数据给子组件
1.父组件App.vue
<template>
<div id="app">
<input type="button" value="按钮" @click="change()">
<h1>{{msg}}</h1>
<Menu :parentData="msg"></Menu>
</div>
</template>
<script>
import Menu from "../components/Menu"
export default {
name: 'app',
data () {
return {
msg: '我是父组件',
}
},
methods: {
change(){
this.msg = "数据被改变了"
}
},
components: {
Menu
}
}
</script>
2.子组件Menu.vue想要拿到父组件数据: 使用props["parentDate"]
components/Menu.vue
<template>
<div id="#child">
<h1>我是子组件加载父组件的数据:{{parentData}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
}
},
props: ["parentData"]
}
</script>
二.子组件更改父组件的数据
vue2.0子组件不能更改父组件的数据, 如果想的话,父组件传个对象给子组件
父组件每次传一个对象给子组件, 对象之间引用
1.父组件App.vue
<template>
<div id="app">
<input type="button" value="按钮" @click="changeParent()">
<h1>{{giveDate.msg}}</h1>
<Menu :parentData="giveDate"></Menu>
</div>
</template>
<script>
import Menu from "../components/Menu"
export default {
name: 'app',
data () {
return {
giveDate: {
msg: '我是父组件',
}
}
},
methods: {
changeParent(){
this.giveDate.msg = "数据被改变了"
}
},
components: {
Menu
}
}
</script>
2.子组件Menu.vue
<template>
<div id="#child">
<h1>我是子组件加载父组件的数据:{{parentData.msg}}</h1>
<input type="button" value="按钮" @click="changeChile()">
</div>
</template>
<script>
export default {
data(){
return {
}
},
methods: {
changeChile(){
this.parentData.msg = "111"
}
},
props: ["parentData"]
}
</script>
优质内容筛选与推荐>>
1、强烈鄙视8848告百度
2、ubuntu修改mysql的root密码
3、LeetCode: 554. Brick Wall
4、Problem 5
5、[转载]C#中的new修饰符以及多态