vue中父组件改变子组件中的data,子组件改变父组件中的data

一、父组件改变子组件的data

父组件parent.vue

1. <template>
2.     <div>
3.         <span style="height:100px;">父组件</span>
4.         <button @click="change">按钮</button>
5.         <div style="margin-top:5px;">
6.             <childForm style="padding:30px 20px;" ref="child"></childForm>
7.         </div>
8.    </div>
9. </template>
10.       <script >
11.             import childForm from '.../child'
12.              export default {
13.                  data () {},
14.                  methods: {
15. //                     点击按钮改变子组件name值
16.                     change() {
17.                         this.$refs.child.name="改变后的值"   
18.                     }
19.                }
20.              }
21.         </script>

 

子组件child.vue

1. <template>
2.        <div>
3.             <span style="height:100px;">子组件</span>
4.             <div>{{name}}</div>
5.         </div>
6. </template>
7.        <script >
8.              export default {
9.                  data () {
10.                      return {
11.                          name:'未改变的子组件值'
12.                      }
13.                  },
14.                  methods: {
15.                }
16.              }
17.         </script>

 

二、子组件改变父亲组件的data

父组件parent.vue

1. <template>
2. <div>
3.         <span style="height:100px;">父组件</span>
4.         <span>{{name}}</span>
5.         <div style="margin-top:5px;">
6.             <childForm style="padding:30px 20px;" :parent='this' ></childForm>
7.         </div>
8. </div>
9. </template>
10. <script >
11.             import childForm from '.../child'
12.              export default {
13.                  data () {
14.                      return {
15.                          name:'父组件值'
16.                      }
17.                  },
18.                  methods: {
19.                }
20.              }
21.  </script>

 

子组件child.vue

1. <template>
2. <div>
3.         <span style="height:100px;">子组件</span>
4.         <button @click="change">按钮</button>
5.  </div>
6. </template>
7. <script >
8.          export default {
9.              data () {
10.                  return {
11.                      
12.                  }
13.              },
14.              props: ['parent'],
15.              methods: {
16. //                     点击按钮取得父组件name值
17.               change(){
18.                   console.log(this.parent.name)
19.               }
20.            }
21.          }
22.  </script>