问题来了：text/x-template 是什么？
这个可以用来创建 Vue 组件，用来分离代码便于查看管理，具体是什么我也不知道 ）-|
声明组件的简单写：
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
// HTML代码中使用
<public-tab></public-tab>
<script type="text/x-template" id="public-tab">
<div>这是一个组件</div>
</script>
<script>
// vue实例中挂载注册为局部组件
// components: {
// public-tab: {
// template: '#public-tab',
// props:{},
// data(){},
// methods:{},
// created(){},
// mounted(){}
// }
// }
// 或者 全局组件（推荐）
Vue.component('public-tab', {
template: '#public-tab',
props:{},
data(){},
methods:{},
created(){},
mounted(){}
});
</script>
说明下： Vue.component('public-tab', { template: '#public-tab'})
第一个 public-tab：这是 声明组件的名称
这是你在其他地方引用该组件的名字，也就是 全局注册 组件的名称。之后你可以在 HTML 模板中通过 <public-tab></public-tab> 来使用这个组件
第二个 public-tab：这是 模板的 id
这意味着在 HTML 文件中应该有一个 <template> 或者 <script type="text/x-template"> 标签，其 id 为 public-tab，例如
<script type="text/x-template" id="public-tab">
</script>
下面是 html 中 vue2 和 vue3 的写法
vue2 的写法 vue3这样写也可以
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<public-tab
model_id="15"
:is_show_left="false"
@change="changePriceTab">
</public-tab>
<script type="text/x-template" id="public-tab">
<div class="wrap-tabs" :class="{'basic-tabs-radius':is_border}">
<div @click="changePriceTab('pre')" v-if="showBtn&&is_show_left">
</div>
</div>
<div @click="changePriceTab('next')" v-if="showBtn">
</div>
</script>
<script>
Vue.component('public-tab', {
template: '#public-tab',
props: {
wrap_width: {
type: Number,
default: 1000
},
},
data() {
return {
showBtn: true,
dataList: [],
isMove: false
}
},
methods: {
changePriceTab(type) {
// 函数体
}
},
created() {
this.dataList = JSON.parse(this.data_list)
},
mounted() {
this.$nextTick(() => {
})
}
})
</script>
</body>
</html>
vue3 的写法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<script src="/static/js/vue.min.js"></script>
</head>
<body>
<div id="app" v-cloak>
<public-tab></public-tab>
</div>
<!-- 抽离模板到 <template> 中 -->
<template id="public-tab">
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<button @click="changePriceTab">修改标题和消息</button>
</div>
</template>
<script>
const { createApp, defineComponent, ref } = Vue;
// 定义第一个组件
const publicTab = defineComponent({
name: 'public-tab',
template: '#public-tab',
props: {
wrap_width: {
type: Number,
default: 1000
},
},
setup() {
const title = ref('111111111111111');
const message = ref('2222222222222');
const changePriceTab = () => {
title.value = '333333333333';
message.value = '444444444444';
};
return {
title,
message,
changePriceTab,
};
},
});
// 创建 Vue 应用并注册组件
createApp(publicTab).mount('#app');
</script>
</body>
</html>
// vue3 嵌套的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="/static/js/vue.min.js"></script>
</head>
<body>
<div id="overview">
{{RootProps}}
<Parent :mes="RootProps" />
</div>
<template id="Parent">
{{mes}}
<Children :sub="mes+'阿斯顿撒'" />
</template>
<template id="Children">{{sub}}</template>
</body>
<script>
const { createApp, ref, computed, watch, defineComponent } = Vue;
const Children = defineComponent({
template: "#Children",
name: "Children",
props: {
sub: String,
},
setup(props, context) {
console.log("我是子组件",props);
},
});
const Parent = defineComponent({
template: "#Parent",
components: {
Children,
},
props: {
mes: String,
},
setup(props, context) {
console.log("我是父组件",props);
},
});
const RootProps = ref("RootProps string");
const app = createApp({
components: { Parent },
setup() {
return {
RootProps,
};
},
});
app.mount("#overview");
</script>
</html>
