vue.js通信方式

vue.js的通信方式

1.props和$emit()通信方式(适用于父子组件之间传值)

//创建父组件
   1. var vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: '父组件的值'
        }
      },
      methods: {
           //事件调用，获取子组件传入的值value
        ChangeDate(value) {
          this.msg = value //
        }
      }
​
    })
    
    
    //自定义一个组件作为子组件
    Vue.component('ChildNode', {
      data() {
        return {
          msg: '这是子组件的值'
        }
      },
      props: ['msg'], //通过props来接收父组件的值,props接收值的方式可是对象和数组
      template: ` <div>
        <h3>btn组件</h3>
        <div>
          父组件传值
          <h5>这是父组建的值;{{msg}}</h5>
          <input type="text" v-model="msg" @input="changeMsg">
        </div>
      </div>`,
      methods: {
          //input事件通过$emit()来触发在父组件中自定义的事件来传值
        changeMsg() {
          this.$emit('change-data', this.msg)
        }
      },
    })
​
​
  <div id="app">
    {{msg}}
    <h3>父子组件传值</h3>
     <!--:msg="msg"是传给子组件的值，v-on:change-data="ChangeDate"是子组件要触发的自定义事件-->
    <child-node :msg="msg" v-on:change-data="ChangeDate"></child-node>
  </div>
​

2.$attrs和$listeners（常用于对原生组件的封装,多层嵌套组件的传值方式)

  <div id="app">
    {{title}}
    <test1 ref="son"></test1>
​
    <test2 :status="status" :title="title" v-on:getdata="getdata"></test2>
  </div>
​
//组件3 
Vue.component('Test3', {
      data() {
        return {
          datas: '嵌套子组件3'
        }
      },
      template: `<div>
      <h3>{{datas}}</h3>
          <button @click="changeData">改变title的值</button>
    </div>`,
      created() {
        console.log('-----Test3------')
        console.log(this.$attrs.title) //{status: false}
        console.log(this.$listeners()) // {getData: ƒ}
      },
      methods: {
        changeData() {
          this.$attrs.title = 'test3改变了父组件的值'
          this.$emit('getdata', this.$attrs.title)
        }
      },
    })
​
    //自定义组价
    Vue.component('Test2', {
      data() {
        return {
          datas: '我是test2组件'
        }
      },
      props: ['status'],
      template: `<div>
        <h1>我是Test2</h1>
         <div>嵌套子组件</div>
         <test3 v-bind="$attrs" v-on="$listeners"></test3>
      </div>`,
      created() {
​
      },
      methods: {
        getTest() {
          console.log(this.datas)
        }
      },
    })
    
 //根组件
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          msg: '$refs传值',
          title: '这个根组件的值',
          status: false
        }
      },
      mounted() {
        console.log(this.$children)
​
      },
      methods: {
        getdata(val) {
          this.title = val
        }
      }
    })
    
  </script>

3.事件总线的方式（使用任意组价的传值）

  <div id="app">
    {{msg}}
    <hr>
    <test1></test1>
    <hr>
    <test2></test2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
  <script>
    /**
     * 组件1向组件3传值,使用事件总线
     * 
     */
      
      //创建一个事件总线
    const Bus = new Vue();
​
    //组件1
    Vue.component('Test1', {
      data() {
        return {
          msg: '这个test1组件的值',
        }
      },
      template: `
      <div>
        {{msg}} 
        <button @click="changeValue">改变数据</button>
        </div>`,
      created() {
        console.log(`${this.titleFather}-----------SonTwo`)
​
      },
      mounted() {
        this.isShow = true
        this.$nextTick(() => {
          this.$refs.input.focus()
        })
      },
      methods: {
          //通过Bus.$emit()来触发getTitle事件，并传入值
        changeValue() {
          Bus.$emit('getTitle', this.msg)
        }
      },
    })
​
   //组件2
    Vue.component('Test2', {
      data() {
        return {
          person: {
            name: 'tom',
            age: 18
          }
        }
      },
      template: `<div>
        <h4>名字:{{person.name}}</h4>
        <h4>年龄：{{person.age}}</h4>
         <h5>嵌套一个子组件</h5>
         <test3></test3>
        </div>`,
    })
​
    //组件3
    Vue.component('Test3', {
      data() {
        return {
          datas: '这是组件3的值',
          title:""
        }
      },
      template: `<div>{{datas}}<h5>test1传递过来的值：{{title}}</h5></div>`,
      mounted() {
          //Bus.$on来监听getTitle，事件的触发，并接受传入的值
        Bus.$on('getTitle', (item) => {
          this.title = item
        })
      },
    })
​
​
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          msg: '这是根组件的值'
        }
      },
      
    })
  </script>

4.provide / inject （祖先及其后代传值）

​
  <div id="app">
    {{msg}}
    <hr>
    <test1></test1>
    <hr>
    <test2></test2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
  <script>
    /**
     * provide和inject的传值方式
     * 
     */
​
​
    Vue.component('Test1', {
      data() {
        return {
          msg: '这个test1组件的值',
          isShow: false
        }
      },
      //接收传递过来的值
      inject: ['titleFather'],
      template: `
      <div>
        {{msg}} 
        <button @click="changeValue">改变数据</button>
        </div>`,
      created() {
        console.log(`${this.titleFather}-----------SonTwo`)
​
      },
      methods: {
      },
    })
​
    Vue.component('Test2', {
      data() {
        return {
          person: {
            name: 'tom',
            age: 18
          }
        }
      },
      //接收父组件的传递的值
      inject: ['titleFather'],
      template: `<div>
        <h4>名字:{{person.name}}</h4>
        <h4>年龄：{{person.age}}</h4>
         <h5>嵌套一个子组件</h5>
         <test3></test3>
        </div>`,
      created() {
        console.log(this.titleFather)
      },
    })
    Vue.component('Test3', {
      data() {
        return {
          datas: '这是组件3的值',
          title: ''
        }
      },
       //接收父组件的值
      inject: ['titleFather'],
      template: `<div>{{datas}}<h5>test1传递过来的值：{{titleFather}}</h5></div>`,
      mounted() {
        console.log(this.titleFather)
      },
    })
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          msg: '这是根组件的值'
        }
      },
      //定义要传递的值
      provide() {
        return {
          titleFather: '父组件的值'
        }
      },
    })
  </script>
​

5.$refs的方式获取子节点refs.XXX将会是一个数组

​
  <div id="app">
    {{msg}}
    <!--通过ref="son"来获取子组件-->
    <test1 ref="son"></test1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
  <script>
    Vue.component('Test1', {
      data() {
        return {
          title: '子组件的值'
        }
      },
      template: `<div>{{title}}</div>`
    })
​
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          msg: '这是父组件'
        }
      },
      mounted() {
        //获取子组件
        console.log(this.$refs.son)
      },
    })
  </script>

6.通过$parent和$children

$parent来获取父组件，$children来获所以的组件，返回值是一个数组

7.使用Vuex来传值