Vue组件之间的通信（js版）

知识点：Vue父子组件之间的通信，Vue父子组件之间通信的双向绑定

父子组件之间的通信

1.父传子

	  <div id="app">
    <my-cpn-f></my-cpn-f>
  </div>

  <template id="cpp1">
    <div>
      <p>这是一个父组件</p>
      <p>{{message}}</p>  // 这是父组件上的数据
      <my-cpn-s :f-music="music"></my-cpn-s>
    </div>
  </template>

  <template id="cpp2">
    <div>
      <p>这是一个子组件</p>
      <p>{{message}}</p> // 这是子组件上的数据
      <p>{{fMusic}}</p>  // 这是父传给子的数据
    </div>
  </template>

 const app = new Vue({
      el:'#app',
      data(){
        return{
          message:'hello vue'
        }
      },
      components:{
        myCpnF:{
          template:'#cpp1',
          data(){
            return {
              message:'father',
              music:'像我这样的人',  // 将父组件中的这个数据传给子组件
            }
          },
          methods:{ 
            getSonMovie(val){
              // console.log(val);
              this.sonMovie = val;
            }
          },
          // 子组件
          components:{
            myCpnS:{
              template:'#cpp2',
              // props:['fMusic'],
              // props:{
              //   fMusic:String
              // },
              props:{
                fMusic:{
                  type:String,
                  default:'' // 如果数据是一个数组或对象，default必须是一个函数，且返回一个数组或对象
                }
              },
              data(){
                return{
                  message:'son'
                }
              }
            }
          }
        }
      }
    })

2. 子传父

	  <div id="app">
    <my-cpn-f></my-cpn-f>
  </div>

  <template id="cpp1">
    <div>
      <p>这是一个父组件</p>
      <p>{{message}}</p>
      <p>{{sonMovie}}</p>  // 这里显示子组件传过来的数据
      <my-cpn-s  @btnclick="getSonMovie"></my-cpn-s>
    </div>
  </template>

  <template id="cpp2">
    <div>
      <p>这是一个子组件</p>
      <p>{{message}}</p>
      <p>{{getMovies()}}</p>
    </div>
  </template>

 const app = new Vue({
      el:'#app',
      data(){
        return{
          message:'hello vue'
        }
      },
      components:{
        myCpnF:{
          template:'#cpp1',
          data(){
            return {
              message:'father',
              sonMovie:''
            }
          },
          methods:{ 
            getSonMovie(val){
              // console.log(val);
              this.sonMovie = val;
            }
          },
          components:{
            myCpnS:{
              template:'#cpp2',
              data(){
                return{
                  message:'son',
                  movies:'我和我的家乡' // 把子组件上的这个数据传递给父组件并在父组件中使用
                }
              },
              methods:{
                getMovies(){
                  // this.$emit('自定义事件',参数/数据)
                   this.$emit('btnclick',this.movies)
                   // 自定义事件的事件名最好全部使用小写字母，不要出现全大写字母和大小写字母混用
                }
              }
            }
          }
        }
      }
    })

父子组件之间通信的双向绑定

1. 事件版

目的：
/*
1. 通过props实现父组件把数据给子组件显示
2. 通过$emit自定义事件把输入值通过子组件发给父组件
3. 父组件拿到数据给再给子组件
4. 从而实现父子组件之间数据的绑定
*/

html代码

   <div id="app">
    <son 
    :father-mes="message"
    @datachange="getSonData"
    >
  </son>
  </div>

  <template id="cpn">
    <div>
      <p>父传子的值:{{fatherMes}}</p>
      <input type="text" @input="dataChange">
    </div>
  </template>

js代码

	    // 子组件
    let son = {
      template:'#cpn',
      props:{
        fatherMes:{
          type:String,
          default:''
        }
      },
      methods:{
        dataChange(event){
          this.$emit('datachange',event.target.value)
        }
      }
    }

    // 父组件
    const app = new Vue({
      el:'#app',
      data:{
        message:'在下框输入值,实现父子组件数据之间的双向响应'
      },
      components:{
        son
      },
      methods:{
        getSonData(val){
          this.message = val;
        }
      }
    })

2. 监听版

html代码

   <div id="app">
    <son 
    :father-mes="message"
    @datachange="getSonData"
    >
  </son>
  </div>

  <template id="cpn">
    <div>
      <p>父传子的值:{{fatherMes}}</p>
      <input type="text" v-model="dum">
    </div>
  </template>

js代码

     // 子组件
    let son = {
      template:'#cpn',
      props:{
        fatherMes:{
          type:String,
          default:''
        }
      },
      data(){
        return{
          dum:this.fatherMes
        }
      },
      watch:{
        dum(val){
          this.$emit('datachange',val)
        }
      }
    }

    // 父组件
    const app = new Vue({
      el:'#app',
      data:{
        message:'在下框输入值,实现父子组件数据之间的双向响应'
      },
      components:{
        son
      },
      methods:{
        getSonData(val){
          this.message = val;
        }
      }
    })

2020—10—1 Vue基础知识 by code_he