Vue开发中父子组件之间的数据传递，有实例代码

我在项目过程中的一个小案例：

<ImageSelector title="选择用户头像" :multipy='false' :visible.sync='showDialog' :siteId='queryParams.siteId' @cancel-select='closeDialog' @confirm-select='handleAvatarSelect'></ImageSelector>

该代码是我在父组件中引用子组件ImageSelector，本次要传的值是siteId，目的是我要将该参数传递到子组件中，而子组件需要带着该参数请求图片目录，子组件中的接收和使用：

props: {
    siteId: {
      type: Number
    }
}

在methods方法中使用的时候，直接this.siteId就可以取到。

首先写了一个Computer.vue组件，非常简单，展示的是数字的加减，该组件代码如下：

<template>
  <div>
    <button @click="increment">+</button>
    <button v-on:click="decrement">-</button>
    <p><span>{{number}}</span></p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello vue',
      number: 0
    }
  },
  methods: {
    increment () {
      this.number++
    },
    decrement () {
      this.number--
    }
  }
}
</script>

其中，在HelloWorld.vue中调用该组件，调用代码如下所示：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <Compute/>
  </div>
</template>

<script>
import Compute from './Computer'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    Compute
  }
}
</script>

上述两部分代码是未传递数据之前的，效果如下所示：

现在，我需要从父组件即HelloWorld.vue向子组件即Computer.vue中传递数据，即代码如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <Compute number="10"/>
  </div>
</template>

如上可以看出，我是传递了一个number值，为10，子组件的是如何拿到的呢，代码如下：

<template>
  <div>
    <button @click="increment">+</button>
    <button v-on:click="decrement">-</button>
    <p><span>{{number}}</span></p>
  </div>
</template>

<script>
export default {
  props: ['number'],
  data () {
    return {
      msg: 'hello vue',
      number: 0
    }
  },
  methods: {
    increment () {
      this.number++
    },
    decrement () {
      this.number--
    }
  }
}
</script>

如上可以看出，我是通过props，且变量名称要一致，都为number，这样，在加载页面的的时候，首先渲染的number值为10，这样就拿到了从父组件传递过来的number值10，如下所示：

现在，在父组件中打印一下传递的变量number，以证明从父组件向子组件中的数据传递是单向的，即只能从父组件流向子组件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <Compute :number="num"/>
    <p><span>父组件：{{num}}</span></p>
  </div>
</template>

并且动态记录number的值，如上代码所示，现在无论子组件中的number值如何变化，父组件中记录的值不会发生任何变化：

现在，我想从子组件向父组件传递数据，代码如下所示：

Computer.vue(子组件代码）：

<template>
  <div>
    <button @click="increment">+</button>
    <button v-on:click="decrement">-</button>
    <p><span>{{number}}</span></p>
  </div>
</template>

<script>
export default {
  props: ['number'],
  data () {
    return {
      msg: 'hello vue',
      number: 0
    }
  },
  methods: {
    increment () {
      this.$emit('incre')
    },
    decrement () {
      this.$emit('decre')
    }
  }
}
</script>

父组件代码（HelloWorld.vue）:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <Compute :number="num" v-on:incre="increment" v-on:decre="decrement"/>
    <p><span>父组件：{{num}}</span></p>
  </div>
</template>

<script>
import Compute from './Computer'
export default {
  name: 'HelloWorld',
  data () {
    return {
      num: 10,
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    increment () {
      this.num++
    },
    decrement () {
      this.num--
    }
  },
  components: {
    Compute
  }
}
</script>

效果如图所示：父子组件中的数据实现了同步变化。

子组件加是因为子组件中触发了父组件中的方法，父组件中的方法发生变化之后，父组件中的变化会同步流向子组件；因此父子组件达到了双向流通。

Vue开发中父子组件之间的数据传递，有实例代码

猜你喜欢