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中父组件向子组件通信的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue2.x中的父子组件相互通信的实现方法

    Vue2.x中的父子组件相互通信的实现方法

    业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template> <div> <p>群消息girl:</p> <div> {{ somebody }} 说: 我 {{ age }} 了. </div> <hr> <v-girl-group :girls="aGirls"

  • vue子父组件通信的实现代码

    之前在用vue写子父组件通信的时候,老是遇到问题!!! 子组件传值给父组件: 子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法 模板: <div v-on:click="switchViewBtn">切换视图</div> 在data中定义:switchStatus = true; 方法: switchViewBtn(){ let that=this; this.$emit("parentView",that.s

  • vuejs父子组件通信的问题

    父子组件之间可以通过props进行通信: 组件的定义: 1.创建component类: var Profile = Vue.extend({ template: "<div>Lily</div>"; }) 2.注册一个tagnme: Vue.component("me-profile",Profile);//全局注册 局部注册: var vm = new Vue({ el: "#todo", components: { &

  • vue2.0父子组件及非父子组件之间的通信方法

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

  • Vuejs第十篇之vuejs父子组件通信

    本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 父子组件通信 ①访问子组件.父组件.根组件: this.$parent 访问父组件 this.$children 访问子组件(是一个数组) this.$root 根实例的后代访问根实例 示例代码: <div id="a

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

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述.下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的.子组件的模板中是无法直接调用父组件的数据. 可以使用props将父组件的数据传给子组件.子组件在接受数据时要显示声明props 看下面的例子 <div id="app"> <panda here='China'></panda> </div> <s

  • Vue子组件向父组件通信与父组件调用子组件中的方法

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

    子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg); 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e), 而msg已经在data中声明,其值为"子级消息",故最终的输出结果为: 展示父级接收到的消息:子级消息 父组件调用子组件

  • Vue中父组件向子组件传递数据的几种方法

    最近在学习vue的源码,总结了几种vue中父子组件传递数据的方法. 1.props & event 父组件向子组件传递props数据,子组件通过触发事件向父组件回传数据,代码如下: //子组件 <template> <div @click="changeName('YYY')">{{name}}</div> </template> <script> export default{ props:['name'],//or

  • vue.js中父组件调用子组件的内部方法示例

    前言 今天同事问了一个问题,他在用iview开发时,需要用到iview一个组件的内部方法,而这个内部方法并没有暴露出来,这种情况下如何调用组件内部方法呢,其实很简单,举个栗子

  • vue父组件向子组件(props)传递数据的方法

    vue父组件向子组件(props)传递数据的方法

    vue页面结构 在做项目的时候常常有这样的一个情况,这个页面的数据(比如:id号)要带到另一个页面去查询某个数据的详情等,传统的作法不是在url上加参数,cookie或者是现在H5的"sessionStorage"和"localStorage"上赋值,这是页面之间传递的方法. 随着Angularjs,React,Vue的流行组件式的开发方式成为另一种不错的解决方案. 最近就有一些小伙伴问我,vue组件之间是如何传递参数的?其实vue是有三种方式可以组件之间传递数据(

  • Vue父组件和子组件之间数据传递和方法调用

    vue组件在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性. 父组件向子组件传值(子组件主动获取父组件的数据和方法) 父组件import引用子组件 使用子组件时在子组件上添加一个v-bind属性,并绑定上数据 在子组件中创建 props ,在props 中创建相同的属性名,用来接收数据 把接收到的数据在子组件中使用 子组件向父组件传值(父组件主动获取子组件的数据和方法) 子组件中需要发出该自定义

  • vue 使用ref 让父组件调用子组件的方法

    父级组件上的三个按钮可以 调用子组件loading的三个方法,执行不同的操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="app&qu

  • Vue父组件调用子组件事件方法

    Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }, methods { callMethod () { con

  • 图文介绍Vue父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属性绑定并赋值给子组件 5:子组件通过 props 接收父组件传递过的数据 6:查看 7:总结: 子组件在props中创建一个属性,用以接收父组件传过来的值父组件中注册子组件在子组件标签中添加子组件props中创建的属性把需要传给子组件的值赋给该属性 您可能感兴趣的文章: VUEJS 2.0 子组件访

  • vue父组件向子组件传递多个数据的实例

    在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况: 第一种:静态数据传递:传递一个 字符串 第二种:动态数据传递:绑定一个字符串传过去,一个数组,或者是一个对象传递过去 这里主要看一下动态的数据绑定.比如你可以将你所有需要的数据都封装在一个数组,或者是一个对象里面然后 传递给子组件. 但是有一个问题,假如你有两个数据,一个对象,一个数组,需要同时从父组件传递给子组件,你会怎么办? 这里就通过一个例子来说明一下: 子组件

随机推荐