html和Vue-cli使用全局组件Vue.component

最新推荐文章于 2024-07-14 14:12:04 发布

ddydyt

最新推荐文章于 2024-07-14 14:12:04 发布

阅读量959

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_39088411/article/details/106013182

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在HTML文件中

<!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="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <wjr></wjr>
    </div>
    <script>
            // 注册全局组件--在任何一个地方都可以使用的组件
            // 参数1 ： 组件名称
            // 参数2 ： 组件的具体内容    模板、方法、数据
            Vue.component('wjr',{
            // 模板       
            template:`
            <div>
            <input type="text">
            <button>全局组件按钮</button>
            <span>{{msg}}</span>
            </div>
            `,
            data:function(){
                return{
                    msg:"Hellow Vue.js!"
                }
            },
            methods:{

            }
        })
        const app = new Vue({
            el:"#app",
            data:{
                
            }
        })



    </script>
</body>
</html>

在Vue-cli中

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false  //是否是生产环境

Vue.component('abc',{
  template:`
  <div>
    <span>我是{{aoe}}</span>
  </div>
  `,
  data:function(){
    return{
      aoe:'啊哦额'
    }
  }
})
// 实例化Vue对象，在整个工程中只有一个Vue对象
new Vue({
  render: h => h(App),  //渲染APP.Vue
}).$mount('#app')