1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之父组件向子组件传值

Vue教程之父组件向子组件传值

实例演示

父组件

<template>
  <div>
    <Demo4 :number="1"></Demo4>
  </div>
</template>

<script>
import Demo4 from './components/Demo4'
export default {
  components: {
    Demo4
  }
}
</script>

子组件

<template>
  <div>
    <h1>{{ number }}</h1>
  </div>
</template>

<script>
export default {
  props: ['number']  // props 接受父组件传递过来的值
}
</script>

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样是为了防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

父组件传递给子组件的值,是存在与父组件的 data 中的,也就是说,父组件会将 data 中的值同时传递给多个子组件,那么多个子组件则是共享了父组件 data 中的值,因此如果子组件可以直接修改父组件传递过来的值,那么则会造成其他子组件的值发生变化,这样是不被允许的,因此 vue 使用单向数据流的方式来进行父向子传值,避免发生此种问题。

每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告,例如:

子组件

<template>
  <div>
    <h1 @click="handleClick">{{ number }}</h1>
  </div>
</template>

<script>
export default {
  props: ['number'],
  methods: {
    handleClick () {
      this.number++
    }
  }
}
</script>
Vue教程之父组件向子组件传值

因为单向数据流的限制,我们虽然无法直接修改父组件传递到子组件的值,但是我们是可以通过间接的方式修改的,我们将父组件传递过来的值,重新赋值到子组件中的 data 里的一个变量即可实现数据的修改,例如:

<template>
  <div>
    <h1 @click="handleClick">{{ count }}</h1>
  </div>
</template>

<script>
export default {
  props: ['number'],
  data () {
    return {
      count: 0
    }
  },
  mounted () {
    this.count = this.number
  },
  methods: {
    handleClick () {
      this.count++
    }
  }
}
</script>

还有一个需要注意的地方,就是如果父组件向子组件传递的一个对象数据,也就是引用传递的话,直接在子组件修改对象数据内的元素数据是没有问题,但是如果直接修改父组件传递给子组件的引用值则会触发警告,例如:

父组件:

<template>
  <div>
    <Demo4 :user="user"></Demo4>
  </div>
</template>

<script>
import Demo4 from './components/Demo4'
export default {
  data () {
    return {
      user: {
        id: 1,
        name: 'lanyulei'
      }
    }
  },
  components: {
    Demo4
  }
}
</script>

子组件:

<template>
  <div>
    <h1 @click="handleClick">{{ user.name }}</h1>
  </div>
</template>

<script>
export default {
  props: ['user'],
  methods: {
    handleClick () {
      this.user.name = 'lanyulei1'
    }
  }
}
</script>

直接修改引用值的情况,则触发警告,如下:

handleClick () {
  this.user = {id: 2, name: 'lanyulei2'}
}

标签
这篇文章对您有用吗?

我们要如何帮助您?

发表评论

您的电子邮箱地址不会被公开。