时间:2021-05-26
A组件(要动态创建的组件)
<template> <div class="a"> <h2>{{ title }}</h2> <p>{{ data }}</p> </div></template><script>export default { props: { title: { type: String, default: "hello world!" }, message: { type: String, default: "o(∩_∩)o 哈哈" }, duration: { type: Number, default: 1000 } }, data() { return { data: "我是a组件", }; }, created() { let num = 1 const timer = setInterval(() => { this.data = num++ }, this.duration) this.$once("hook: beforeDestroy", () => clearInterval(timer)) }};</script><style>.a { position: fixed; width: 100%; top: 16px; left: 0; text-align: center; pointer-events: none; background-color: #fff; border: grey 3px solid; box-sizing: border-box;}</style>B组件(操作动态创建组件的地方)
<template> <div class="b"> <button @click="createA">创建</button> </div></template><script>import A from "@/components/A.vue"import { create } from "@/utils/create.js"export default { components: { A, }, methods: { createA() { // 创建A组件,并挂载到body上 create(A, { title: "vue", message: "么么哒😙" }) } },};</script>以上就是vue 动态创建组件的两种方法的详细内容,更多关于vue 动态创建组件的资料请关注其它相关文章!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
创建组件的两种方法小结1.全局注册2.局部注册varchild=Vue.extend({})varparent=Vue.extend({})Vue.extend
前言在深入了解Vue动态创建Component前先了解一下常规组件声明形式。Vue的组件通常可以通过两种方式来声明,一种是通过Vue.component,另外一
javascript动态生成css代码的两种方法有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,
Axure动态面板有两种创建方法,这两种方法有什么区别呢?下面我们就来详细介绍一下。软件名称:原型设计工具AxureRPPro8.1特别版中文汉化特别版(附汉化
下面将介绍两种方式实现动态添加和删除列表1.不使用组件Vue测试实例-vue实现列表增加和删除添加{{list.title}}删除varvm=newVue({e