本篇文章为大家展示了web面试vue自定义组件及调用方式是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
由于项目需求, 部分相同的代码我们会封装成组件, 在需要使用的地方导入,
并以标签的形式书写在中,
但是在"vant"组件库中, "Dialog 弹出框"组件有2中使用方式
通常我们自定义组件, 一般也是通过方式二的形式使用, 今天介绍方式一如何使用
// 将要显示的组件导入
import mymodel from '../components/mymodel.vue'
export default {
install: function (Vue) {
// 1.0 根据 mymodel 组件对象得到它的构造函数
const Mymodel = Vue.extend(mymodel)
// 给所有的 vue 实例添加一个方法 $model
Vue.prototype.$model = function () {
// 为了显示一个组件: mymodel
// 2.0 创建一个组件对象
const obj = new Mymodel()
// 3.0 将组件显示出来
obj.show = true
// 4.0 得到组件对象的 html 结构
const html = obj.$mount().$el
// 5.0 将 html 结构渲染到页面上
document.body.append(html)
}
}
}
<template>
<div>
<h4>以普通组件的方法来调用</h4>
<button @click="fn1">show Model</button>
<!-- <mymodel :value="show" @input="val => (show = val)"></mymodel> -->
<mymodel v-model="show"></mymodel>
<!-- sync:向组件内传入了参数: xxx 从组件中接收了事件:update:xxx 事件会自动修改 xxx -->
<!-- v-model:向组件内传入了参数: value 从组件中接收了事件:input 事件会自动修改 value -->
<h4>以 js 方式来调用</h4>
<button @click="fn2">show Model</button>
</div>
</template>
<script>
import mymodel from '../../components/mymodel.vue'
export default {
data () {
return {
show: false
}
},
methods: {
fn1 () {
this.show = true
},
fn2 () {
// 通过 js 的方法直接将组件显示出来
this.$model()
}
},
components: {
mymodel: mymodel
}
}
</script>
<style></style>
上述内容就是web面试vue自定义组件及调用方式是怎样的,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。