Vue中父组件向子组件通信的方法

Vue是一个轻量级的渐进式框架，对于它的一些特性和优点在此就不做赘述。下面通过本文给大家分享Vue中父组件向子组件通信的方法，具体内容详情如下所示：

props

组件实例的作用域是孤立的。子组件的模板中是无法直接调用父组件的数据。

可以使用props将父组件的数据传给子组件。子组件在接受数据时要显示声明props

看下面的例子

<div id="app">
  <panda here='China'></panda>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
  Vue.component('panda',{
    props:['here'],
    template:`<div>panda from {{here}}</div>`
  })
  new Vue({
    el: '#app'
  })
</script>

页面上展示的是 panda from China

处理属性中带'-‘的问题

Vue是不支持带杠的写法的。

如果上述的here变成from-here。需要这样写(小驼峰的写法)

<div id="app">
  <panda from-here='China'></panda>
</div>
<script>
  Vue.component('panda',{
    props:['fromHere'],
    template:`<div>panda from {{fromHere}}</div>`
  })
  new Vue({
    el: '#app'
  })
</script>

如果需要动态绑定，需要用到v-bind

<body>
  <div id="app">
    <panda :here='msg'></panda>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
  Vue.component('panda',{
    props:['here'],
    template:`<div>panda from {{here}}</div>`
  })
  new Vue({
    el: '#app',
    data:{
      msg:'China'
    }
  })
  </script>
</body>

这样子组件就展示出了父组件的信息(把构造器中的data值传递给组件)。而且是动态绑定（用了v-bind）的。当父组件的data.msg发生变化的时候。子组件里面的内容也会相应的发生变化。

注意：props默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态

以上所述是小编给大家介绍的Vue中父组件向子组件通信的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# vue # 父组件向子组件通信 # vue2.0父子组件间通信的实现方法 # Vuejs第十篇之vuejs父子组件通信 # vue项目中v-model父子组件通信的实现详解 # Vue2.x中的父子组件相互通信的实现方法 # vue父组件向子组件动态传值的两种方法 # vue.js父子组件通信动态绑定的实例 # 绑定 # 在此 # 给大家 # 小编 # 的是 # 是一个 # 这是 # 也会 # 出了 # 用了 # 不做 # 不支持 # 可以使用 # 所示 # 这样子 # 时要 # 所述 # 为了防止 # 给我留言 # 具体内容

返回目录在线咨询

上一篇：2025年开发一款APP需要多少预算？
下一篇：Python中处理可选属性与状态关联的类型检查：解耦与Result模式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Vue中父组件向子组件通信的方法

您的项目需求