VUE父组件和子组件之间的传参方式

vue父子组件传参方式

话不多少上干货

1.父传子props

父组件

	html
 	<h4>父传子props</h4>
    <div>父组件</div>
    <headerOne :ary="ary" :obj="obj" :numbers="numbers"></headerOne>

  javascript
  import headerOne from '../components/父传子props' 
   export default {
    data() {
      return {
        obj:{
          'b':[],
        },
        ary:[
          {'d':1}
        ],
        numbers:'父组件元素123'
      }
    },
    components: {
      headerOne
    }
  }

子组件

<template>
  <div class="hello">
      子组件
    <div>父组件元素numbers: {{numbers}}</div>
    <div>父组件元素ary: {{ary}}</div>
    <div>父组件元素obj: {{obj}}</div>

  </div>
</template>

<script>
export default {
  props:['ary','obj','numbers'],
  created() {
    console.log(this);
    console.log(this.ary);  // 已经获取到父组件内的数组数据
    console.log(this.obj);  // 已经获取到父组件内的对象数据
    console.log(this.numbers); // 已经获取到父组件内的数据
  },
}
</script>

2.父组件通过ref调用子组件方法

父组件

	html
 	<h4>父组件调用子组件的事件</h4>
    <refCall ref="son"></refCall>
    <button @click="callSon">调用子组件事件</button>

  javascript
  import refCall from '../components/ref'
   export default {
    data() {
      return {
      }
    },
     methods: {
      callSon(){
        console.log(this.$refs.son);
        this.$refs.son.refSon()
      }
    },
    components: {
      refCall
    }
  }

子组件

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      refSon() {
        alert('这是ref子组件')
      }
    }
  }
</script>

3.子组件通过$emit向父组件传值

父组件

	html
 	 <h4>子传父 this.$emit('自定义的方法名', this.son)</h4>
    <two v-on:childSon="childSon"></two>
    {{name}}

  javascript
 <script>
  import two from '../components/子传父$emit'
  export default {
    name: "first",
    data() {
      return {
        name:"父组件",
      }
    },
    created() {
    },
    methods: {
      childSon(son){
        console.log(son);
        this.name = son
      },
    },
    components: {
    	two
    }
  }
</script>

子组件

<template>
  <div>
    <div>{{son}}</div>
      <button @click="buttonClick">点击触发</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        son:'子组件元素1'
      }
    },
    methods:{
      buttonClick(){
        console.log(this.son);
        this.$emit('childSon', this.son)
      }
    }
  }
</script>

4.使用$ parent和 $ children获取父子组件的参数

父组件

	html
    <h4>$parent和$children获取父子组件的参数</h4>
    <son></son>
    <p>{{sonValue}}</p>
    <button @click="sonClick">使用$children获取子组件的参数</button>

  javascript
  <script>
  import son from '../components/子组件1'

  export default {
    name: "first",
    data() {
      return {
    	sonValue:"",
      }
    },
    created() {
    },
    methods: {
     sonClick(){
        console.log(this.$children[4].value);
        // 获取第4个子组件内的 value参数
        this.sonValue = this.$children[4].value
      }
    },
    components: {
   		son
    }
  }
</script>

子组件

<template>
    <div>
      <p>{{son}}</p>
      <button @click="butSong">获取父组件的元素</button>
    </div>
</template>

 export default {
      data(){
          return {
            son:'',
            value:'子组件的元素啊'
          }
      },
      created() {
      },
      methods:{
        butSong(){
          console.log(this.$parent.name); // 获取父组件内的name参数
          this.son = this.$parent.name
        }
      }
    }

5.通过eventBus

可以注册全局时间对象，在main.js里：window.eventBus = new Vue();
也可以创建一个js，里面写入如下：
import Vue from 'vue'
export default new Vue();
以上方法均可

为了方便展示，我这边使用的是单独引用一个js

父组件

	html
    <h4>bus事件车</h4>
    <child1></child1>
    <child2></child2>

  javascript
  <script>
  import child1 from '../components/child1'
  import child2 from '../components/child2'

  export default {
    name: "first",
    data() {
      return {
        obj:{
          'b':[],
        },
        ary:[
          {'d':1}
        ],
        numbers:'父组件元素123',
        name:"父组件",
        sonValue:"",
      }
    },
    components: {
      child1,
      child2
    }
  }
</script>

子组件child1

<template>
  <div>
    <p>第一个child1</p>
    <p>{{child}}</p>
    <button @click="childFirst">按钮</button>
  </div>
</template>

<script>
  import bus from './bus'
  export default {
    name: "child1",
    data() {
      return {
        child:'我是第一个'
      }
    },
    created(){

    },
    methods:{
      childFirst(){
        bus.$emit('childClick',this.child)
      }
    }
  }
</script>

子组件child2

<template>
  <div>
    <p>第二个child</p>
    <p>{{childList}}</p>
  </div>
</template>

<script>
  import bus from './bus'
  export default {
    data() {
      return {
        childList:""
      }
    },
    created() {
    },
    mounted(){
      bus.$on('childClick',(data)=>{
        console.log(data);
        this.childList = data
      })
    }
  }
</script>

bus.js

import Vue from 'vue'
export default new Vue();

6.VUEX

vuex本篇文章不做过多介绍，稍后会出一篇vuex的文章，后续会把地址链接到此处！

最后

												个人练手总结，如有不准确请联系作者告知！！！