vue 组件之间传值

vue组件间传值分为父组件给子组件传值和子组件给父组件传值

一、父组件给子组件传值

父组件中引入子组件，父组件的js里定义要传递的属性值，下面的写法是动态的传递，name可以通过定义方法，在方法里动态修改，如不需要动态的传递，则直接使用属性定义值

parent.vue

<template>
   <child v-bind:name="name"></child>
</template>
<script>
import child from "./child.vue"
  export default {
     components: {child},
     data(){
      return {name:"张三"}
     }
  }
</script>

子组件定义props接收父组件传递的值，如下：

child.vue

<template>
  <div>{
  {name}}</div>
</template>
<script>
  export default {
    props:["name"]
  }
</script>

二、子组件给父组件传值

首先在父组件中引入子组件，定义一个方法接