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

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
上一篇清晰了解MVC/MVP/MVVM三种模式
下一篇webpack(一)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭