本篇内容主要讲解“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'] /*通过props接收父组件传递过来的数据 */ } </script>