js组件封装，调用的方法怎么写

Posted 2023-04-25

参考技术A 1、定义一个传入占位节点id的组件类
比如这里定义一个组件MyClass
function MyClass(id)//组件模板
2、在组件内获取节点id
function MyClass(id)//组件模板
var _self = document.getElementById(id);//根据id获取组件
3、定义类的方法
function MyClass(id)//组件模板
var _self = document.getElementById(id);//根据id获取组件
this.addP=function()//定义类方法，这里是显示内容为1233
_self.innerhtml ="1233";

4、直接在js中调用使用该组件方法
示例： 参考技术B 1、定义一个类
2、类中增加一个方法
3、body中定义一个dom节点
4、脚本中把dom节点和类定义结合起来，实现特定的组件功能
示例：
<script>
function testwidegt(did)//定义一个组件类
var _self = document.getelementbyid(did);//根据id获取dom节点
this.addp=function()//增加组件方法，这里就是添加一个节点
_self.innerhtml = '
111
';//在dom节点下添加节点p

return this;//返回当前组件

function test()
var t = new testwidegt('dv');//根据占位的dom节点定义组件
t.addp();//在占位节点中增加显示内容

</script>

111

vue中父组件怎么调用子组件

前言

前段时间，写了个地址的控件，封装成了一个子组件，在其他页面共用。
原文地址：vue利用级联选择器实现全国省市区乡村五级菜单联动

然后当时出现了个bug，也没有太注意，后来才发现的。就是重置不了地址栏里面的信息，于是今天又写了写。

思路

在子组件里面写了个清空地址栏的方法，如下：

cleanModel()
      this.selectedOptions = [];
    ,

然后在父组件引用地址栏的地方写：
ref="resetArea"
完整代码如下：

 <!-- 地址组件 -->
                  <address-utils
                    :size="mini"
                    :placeholder="checkdiqu"
                    ref="resetArea"
                    @getCheckedAddressInfo="getCheckedAddressInfo">
                  </address-utils>

在重置的按钮处调用子组件中清空地址的方法：

//清空地址栏的信息(调用子组件的方法)
      this.$refs.resetArea.cleanModel();

最后就可以啦！