vue单文件props写法-尊龙游戏旗舰厅官网
这种场景你可能需要把模态框包装成插件。vue插件开发和组件的区别 - 水秋玄im.mkinit.com
vue插件和组件的区别
使用插件的方式包装组件和直接注册全局组件其实是一样的，都是注册组件。不同的是，一般组件我们是作为页面的某一块结构，按需引用，但是有些应用场景你可能会用到也可能用不到，总之就是你不知道什么时候会用到，总不能在每个页面都引用吧。再一个，控制组件需要传递props，也就是说每次引用都需要写方法才能达到控制的目的。
所以一般组件就不适合轻提示、加载动画、模态框这种随时需要的功能，所以需要把组件包装成插件，直接添加到页面上(一般是插入到body)，再通过在vue的原型上添加全局功能，使用自定义的方法(api)来控制组件。
vue的组件就是组件，没有其他。但是插件不仅仅限于组件，它也可以包装过滤器、混入、自定义指令。这就是组件和插件的区别。
插件的开发(以轻提示为例子，同时也演示过滤器、混入、自定义指令)
不存在的目录自行创建
1、首先创建一个单文件组件(src/plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.vue)
这就是一个普通的组件
{{message}}export default {
name:'toast',
data(){
return {
show:false,
message:''
}
}
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.toast{
position:fixed;
z-index:100;
left:50%;
top:50%;
transform: translate(-50%,-50%);
padding:1em 2em;
background-color:rgba(0,0,0,.9);
color:#fff;
}
2、创建一个暴露install方法的模块(src/plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.js)
这个插件包含了轻提示组件、混入、过滤、自定义指令这几个基本功能，都可以全局使用。
import toast_component from './js2-vuepluginsdemo.vue'
export default {
//插件需要暴露一个install方法作为回调函数，接收vue和配置参数
install: (vue, options) => { //options 是use时可以传递的参数
console.log(options)
/*
* 定义一个全局混入，混入到所有组件中
*/
vue.mixin({
methods: {
sayhi() { //所有组件都拥有该方法
console.log(this, 'sayhi');
}
},
mounted() { //所有组件都会输出
this.sayhi()
}
})
/*
* toast 组件插件
*/
const component = vue.extend(toast_component) //创建一个组件构造器
const toast = new component({
name:''
data: { //可通过构造时传参初始化数据
'js2': '我是通过构造器传递的参数'
}
}) //实例化组件
toast.$mount()//$mount 如果没有参数，模板将被渲染为文档之外的的元素，必须使用原生 dom api 把它插入文档中。
document.body.appendchild(toast.$el)//手动插入到body
vue.prototype.$toast = (msg, duration = 1500) => {//在vue的原型上创建一个方法作为全局方法，操作的是组件中的data数据
toast.message = msg;
toast.show = true;
settimeout(() => {
toast.show = false;
}, duration);
}
/*
* 定义一个全局指令
*/
vue.directive('focus',{
inserted(ele){
ele.focus()
}
})
/*
* 定义一个全局过滤器
*/
vue.filter('length',value=>{
return value.length
})
}
}
3、注册插件
在入口文件(main.js)中导入并注册插件：
import toast from './plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.js'//导入插件
//import toast from 'js2-vuepluginsdemo'//通过npm下载的包这样引入
vue.use(toast,{option:'我是通过use传入的参数'})//注册这个插件
4、在任何组件中都可以使用插件中的功能
在组件的mounted中调用提示：this.$toast('welcome to your vue.js app',3000)
使用过滤：{{ msg | length }}
使用指令：
总结
以上是尊龙游戏旗舰厅官网为你收集整理的vue单文件props写法_vue开发中怎么按需加载需要被填入props和自定义事件的组件？...的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：