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

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

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

1.动态语法：用v-bind将动态props绑定到父组件的数据，父组件的数据发生改变，子组件也会随之改变

<div id="app">
    <didi-component  :msg="value"></didi-component>//传入获取的数据，引号里面为获取到的数据
</div>
<script>
    window.οnlοad=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.οnlοad=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>