面试-vue自定义组件及2种调用方式

引入:

由于项目需求, 部分相同的代码我们会封装成组件, 在需要使用的地方导入,
并以标签的形式书写在中,
但是在"vant"组件库中, "Dialog 弹出框"组件有2中使用方式

通常我们自定义组件, 一般也是通过方式二的形式使用, 今天介绍方式一如何使用

编码实现

以插件的形式使用组件

// 将要显示的组件导入
import mymodel from '../components/mymodel.vue'export default {install: function (Vue) {// 1.0 根据 mymodel 组件对象得到它的构造函数const Mymodel = Vue.extend(mymodel)// 给所有的 vue 实例添加一个方法 $modelVue.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><h3>以普通组件的方法来调用</h3><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 --><h3>以 js 方式来调用</h3><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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！