Vue传值方式

Vue有三种传值方式：
父传子
子传父
非父子传值

父组件向子组件传值
父组件：

<template>
  <div id="app">
    <input type="text" v-model="name">
    <HelloWorld  msgs="父传子"></HelloWorld>
    //或
    <HelloWorld  :inputName="name"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
	components: {
        Cooperation
    },
	data () {
      return {
        name:''
      }
    },
}
</script>

子组件：

<template>
  <div>
    {{msgs}}
    {{inputName}}
  </div>
</template>

<script>
export default {
	props: {
        msgs:String,
        inputName:String,
    },
}
</script>

子传父
子组件

<template>
  <div>
    子组件:
    <span>{{childValue}}</span>
    <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="childClick">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        childValue: '子组件的数据'
      }
    },
    methods: {
      childClick () {
        this.$emit('childByValue', this.childValue)
      }
    }
  }
</script>

父组件

<template>
  <div>
    父组件:
    <span>{{name}}</span>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <HelloWorld v-on:childByValue="childByValue"></HelloWorld>
  </div>
</template>
<script>
  import HelloWorld from './components/HelloWorld .vue'
  export default {
    components: {
      HelloWorld 
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      childByValue: function (childValue) {
        // childValue就是子组件传过来的值
        this.name = childValue
      }
    }
  }
</script>