父组件与子组件 互相传值 (精简版)

父传子

父组件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld :msg="msg"></HelloWorld>
  </div>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data(){
    return {
      msg:"这是vue"
    }
  },
  components: {
    HelloWorld
  }
}
</script>

子组件：

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props:["msg"]
}
</script>

 

 子传父

父组件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld  @child_vaule="parentent"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods:{
    parentent(data){
      alert(data);
    }
  }
}
</script>

子组件：

<template>
  <div class="hello">
    <button @click="aaa">aaa</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods:{
    aaa(){
      this.$emit('child_vaule','我是一头小毛驴');
    }
  }
}
</script>