<template>
<div>
<div>
<my-vue-div .user="oneD"></my-vue-div>
<my-vue-input @cust="changeT" .user="towD"></my-vue-input>
<p>{{towD}}</p>
</div>
</div>
</template>
<script>
import custMoment from './components/custMoment.vue';
export default {
name: 'App',
data() {
return {
oneD: '第一个自定义元素',
towD: '第二个自定义元素',
}
},
components: {
},
methods: {
changeT(e) {
this.towD = e.detail[0];
},
}
}
</script>
<style scoped>
body {
margin: 0px;
padding: 0px;
}
</style>custMoment组件代码
<script>
import { defineCustomElement } from 'vue';
const MyVueDiv = defineCustomElement({
// 在此提供正常的 Vue 组件选项
props: {
user: String
},
emits: {},
template: `
<div class="ac">{{user}}</div>
`,
// defineCustomElement 独有特性: CSS 会被注入到隐式根 (shadow root) 中
styles: [`
.ac {
width: 100px;
height: 100px;
background: red;
margin-bottom: 15px;
}`
]
})
const MyVueInput = defineCustomElement({
// 在此提供正常的 Vue 组件选项
props: {
user: String
},
emits: ['cust'],
template: `
<input type="text" :value="user" @input="$emit('cust',$event.target.value)"/>`,
// defineCustomElement 独有特性: CSS 会被注入到隐式根 (shadow root) 中
styles: [``]
})
// 注册自定义元素
customElements.define('my-vue-div', MyVueDiv);
customElements.define('my-vue-input', MyVueInput);
export default {
}
</script>
<style scoped>
</style>效果如下
