混合minxins

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div id="app">
    <popup></popup>
    <tooltip></tooltip>
</div>

<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
复制代码
复制代码
#公共的东西写出来,下边直接调用,如果下边写了会被下边的覆盖掉
var base = { methods: { show: function () { this.visible = true }, hide: function () { this.visible = false }, toggle: function () { this.visible = !this.visible } }, data: function () { return { visible: false } } }; Vue.component("tooltip", { template: `
<div> <span @mouseenter="show" @mouseleave="hide">tool</span> <div v-if="visible">张建平</div> </div> `, minxins: [base], data:function () { //覆盖minxins return{ visible:true } } }); Vue.component("popup", { template: ` <div> <button @click="toggle">Popup</button> <div v-if="visible"> <span @click="hide">x</span> <h4>title</h4> this is my test page! this is my test page! this is my test page! this is my test page! this is my test page! this is my test page! this is my test page! this is my test page! </div> </div> `, minxins: [base] }); new Vue({ el: "#app", data: {} })
复制代码

 

posted @   一石数字欠我15w!!!  阅读(1858)  评论(2编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
点击右上角即可分享
微信分享提示