Vue父组件和子组件之间数据传递和方法怎么调用

本篇内容主要讲解“Vue父组件和子组件之间数据传递和方法怎么调用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue父组件和子组件之间数据传递和方法怎么调用”吧!

vue组件在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。

父组件向子组件传值(子组件主动获取父组件的数据和方法)

父组件import引用子组件使用子组件时在子组件上添加一个v-bind属性，并绑定上数据在子组件中创建 props ，在props 中创建相同的属性名，用来接收数据把接收到的数据在子组件中使用

子组件向父组件传值(父组件主动获取子组件的数据和方法)

子组件中需要发出该自定义事件，可以是按钮的点击事件，也可以是其他方式将需要传的值放在 $emit 第二个参数的位置，这个参数会被传给父组件中的响应方法需要在父组件中使用子组件并在子组件标签上绑定对事件的监听

演示代码：

//父组件<template>  <div id="header">      <headerchild ref="headerChild"></headerchild>    <button @click="getChild()">父组件获取子组件的数据和方法</button>  </div></template><script>import HeaderChild from './HeaderChild'export default {  data () {      return {          title:'我是父组件的数据'      }  },  methods: {     getChild (){         console.log(this.$refs.headerChild.name)     },     run (){         console.log("我是父组件里面的方法")     }  },  components: {      'headerchild': HeaderChild  }}</script><style lang="sass" scoped></style>

//子组件<template>  <div id="headerchild">      <button @click="getParent()">获取父组件的数据和方法</button>  </div></template><script>export default {  data () {      return {          name:'我是子组件里面的数据'      }  },  methods:{      getParent(){          console.log(this.$parent.title)           this.$parent.run()      }  },  props:['title','run','home'] }</script>

到此，相信大家对“Vue父组件和子组件之间数据传递和方法怎么调用”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！