Vue组件之间的三种数据传递方式

原创 2018年04月15日 19:38:53

Vue组件之间有三种数据传递方式:Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。

1.props:子组件的模板内并不能直接使用父组件的数据,所以子组件需要用props选项来获取父组件的数据

1.动态语法:用v-bind将动态props绑定到父组件的数据,父组件的数据发生改变,子组件也会随之改变
<div id="app">
    <didi-component  :msg="value"></didi-component>//传入获取的数据,引号里面为获取到的数据
</div>
<script>
    window.onload=function(){
        Vue.component('didi-component',{
            template:"<div>这是组件:{{msg}}</div>",
            props:['msg']            //声明自己要从父组件获取的数据
        });//全局注册组件
        new Vue({
          el:'#app',
          data: {
            value:'父组件向子组件的传递数据'
          }
})

2.绑定修饰符:props默认为单向绑定,是为了防止子组件无意间修改父组件的状态。

            于是出现了绑定修饰符:.sync:双向绑定

                                                 .once:单次绑定

            

<div id="app">
    <input type="text" v-model="info.name"/>
    <child :msg.once="info"></child>        //单次绑定
</div>
<script>
    window.onload=function(){
        new Vue({
          el:'#app',
          data:function(){
              return {
                  info:{
                      name:"顺风车"            //父组件
                  }
              }
          },
          components:{
               child:{
                   props:['msg'],
                   template:"<div>{{msg.name}}欢迎!</div>"    //子组件
               }
          }

})
}

2.组件通信:自定义事件(每个vue实例都是一个事件触发器)

      1.$on()——监听事件。
      2.$emit()——把事件沿着作用域链向上派送。
      3.$dispatch——派发事件,事件沿父链冒泡。
      4.$broadcast——广播事件,事件向下传到后代。
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>    
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>

//子组件
Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',    //v-on监听事件
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')    //触发事件
    }
  },
})

new Vue({
  el: '#counter-event-example',    //父组件
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1            //点击一次+1
    }
  }
})
3.slot分发内容——不同的使用场景组件的一部分内容需要有不同的内容显示,而这个slot就好比组件开发时定义的一个参数(通过name值来区分),如果你不传入就当默认值使用,如果你传入了新的值,那么在组件调用时就会替换你定义的slot的默认值。
主要应用场景是,混合父组件的内容与子组件自己的模板时用到。具体使用步骤:
1)在子组件中,使用slot标签作为组件模板之中的内容分发插槽。 <slot> 元素自身将被替换。
2)在父组件中,使用slot属性,用于标记往哪个slot中插入子组件内容。
当name相同时,响应的内容就会被插入到子组件中去

<div id="app">
    <alert-box>发生一些错误。</alert-box>
</div>
<script>
    //注册子组件(将当前消息派发出去)
    Vue.component('alert-box',{
        template:'<div id="demo"><strong>Error!</strong><slot></slot></div>'
    });
    new Vue({
       el:"#app",
       data:{
       }
    })
</script>




                            
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Queen_zdd/article/details/79947702

vue组件之间的多种通信方法

vue是一种mvvm框架,它相对于jquery可能比较大的差异点之一就在于组件之间的通信了。这里提供三种不同情况下vue组件的通信方式。http://www.jianshu.com/p/a78277b...
  • sinat_17775997
  • sinat_17775997
  • 2017-04-07 13:42:15
  • 997

vuejs几种不同组件(页面)间传值的方式

在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值。 一、路由传值   路由对象如下图所示:      在跳转页面的时候,在js代码中的操作如下,在标签中使用标签...
  • qq_32786873
  • qq_32786873
  • 2017-04-27 10:49:34
  • 27347

vue-router和vue-cli以及组件之间的传值

首先简单介绍使用vue-router的四个基本步骤:(为了方便演示,所有代码都写在一个文件里) 1.定义组件 2.定义路由 3.创建router实例并将定义好的路由传入 ...
  • fanhu6816
  • fanhu6816
  • 2017-01-05 21:22:21
  • 16467

vue.js - 子向父组件传参(下)

1、自定义事件方法一: Vue实例实现了一个自定义事件接口,用于在组件树中通信。这个事件系统独立于原生DOM事件,用法也不同。每个Vue实例都是一个事件触发器: 使用$on()监听事件 使用$emi...
  • zjsfdx
  • zjsfdx
  • 2017-10-29 09:53:29
  • 210

Vue---组件之间的数据传递

Vue---组件之间的数据传递
  • TONELESS
  • TONELESS
  • 2017-05-11 15:48:18
  • 848

Vue 爬坑之路(二)—— 组件之间的数据传递

Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,...
  • bbsyi
  • bbsyi
  • 2017-09-08 18:23:54
  • 833

vue组件传值(附开源地址)

自己做的vue的项目,打算开源发布出去。里面会不断的有新的文章,帮助大家走过各种坑,当然该项目还没完成,我个人也会尽快做。我会借着每次发布新文章时都推广一下。如果看到的,或是有兴趣的人可以给个star...
  • liuyongshun2
  • liuyongshun2
  • 2018-03-22 20:37:10
  • 26

Vue.js学习 Item11 – 组件与组件间的通信

什么是组件?组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些...
  • i10630226
  • i10630226
  • 2016-07-11 23:52:44
  • 2889

综述种类:Android组件之间 数据传递方法

博客源址:activity之间的数据传递方法 博客时间:2012-06-06 18:27 1  基于消息的通信机制 Intent--------boudle,extra 用这种简单的形式,一般...
  • Buaaroid
  • Buaaroid
  • 2015-11-05 17:20:46
  • 2812

vue 父子组件之间的数据传递

子调父 $emit (把子组件的数据传给父组件)父调子 $refs (把父组件的数据传给子组件)父向子传值  (最终想要的是this.fathermessage)父组件:1.&amp;lt;templ...
  • hyupeng1006
  • hyupeng1006
  • 2017-12-14 13:55:33
  • 124
收藏助手
不良信息举报
您举报文章:Vue组件之间的三种数据传递方式
举报原因:
原因补充:

(最多只允许输入30个字)