vue父组件调用子组件方法

约定不等于承诺〃 2023-06-23 12:56 69阅读 0赞

https://www.cnblogs.com/mophy/p/8590291.html

文章目录

  • 什么是组件？
  • 使用组件

组件

什么是组件？

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

使用组件

示例：

　　子组件：

复制代码

  1. <template>
  2.   <div>
  3.     child
  4.   </div>
  5. </template>
  7. <script>
  8.   export default {
  9.     name: "child",
  10.     props: "someprops",
  11.     methods: {
  12.       parentHandleclick(e) {
  13.         console.log(e)
  14.       }
  15.     }
  16.   }
  17. </script>

复制代码

　　父组件：

复制代码

  1. <template>
  2.   <div>
  3.     <button @click="clickParent">点击</button>
  4.     <child ref="mychild"></child>
  5.   </div>
  6. </template>
  8. <script>
  9.   import Child from './child';
  10.   export default {
  11.     name: "parent",
  12.     components: {
  13.       child: Child
  14.     },
  15.     methods: {
  16.       clickParent() {
  17.         this.$refs.mychild.parentHandleclick("嘿嘿嘿");
  18.       }
  19.     }
  20.   }
  21. </script>

复制代码

注意：

　　　1、在子组件中：

是必须要存在的

　　2、在父组件中：首先要引入子组件 import Child from ‘./child’;

　　 3、 是在父组件中为子组件添加一个占位，ref=”mychild”是子组件在父组件中的名字

　　 4、父组件中 components: {　　是声明子组件在父组件中的名字

  1.    5、*在父组件的方法中调用子组件的方法，很重要*   this.$refs.mychild.parentHandleclick("嘿嘿嘿");

分类: VUE

发表评论

表情：
评论列表 （有 0 条评论，69人围观）

还没有评论，来说两句吧...

相关阅读