vue组件的原始初始化方式以及全局组件与局部组件的区分

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<div id="app1">
    <!-- 3：使用组件 -->
    全局组件：
    <cpn></cpn>
</div>
<div id="app2">
    <!-- 3：使用组件 -->
    局部组件：
    <mycpn></mycpn>
</div>
<script>
    /*最原始的组建创建方式
    1：创建组建构造器对象
    */
    const cpnC = Vue.extend({
        template: `<div><div>最原始的组建创建方式</div></div>`,

    })
    /*2：注册全局组件(全局组件，意味着可以在多个Vue的实例下面使用)*/
    Vue.component("cpn",cpnC);

    const app1 = new Vue({
        el: "#app1",

    })

    const app2 = new Vue({
        el: "#app2",
        /*2：在vue的实例里面注册组件（局部组件，意味着只能该vue实例使用）*/
        components:{
            mycpn : cpnC
        }
    })

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

原文地址：https://www.cnblogs.com/cl94/p/12257507.html

时间： 2024-10-12 14:54:05

vue组件的原始初始化方式以及全局组件与局部组件的区分的相关文章

vue组件间通信六种方式（完整版）

vue组件间通信六种方式(完整版) 前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props.$emit/$on.vuex.$parent / $chil

vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

一.定义一个组件定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3>我是标题3</h3>' }); Vue.component('aaa',Aaa); *组件里面放数据: data必须是函数的形式,函数必须返回一个对象(json) 2. 局部组件放到某个组件内部 var vm=new Vue({ el:'#box', data:{ bSign:true }, components:{ //局部组件 aaa:Aaa } }); 1

v-once指令、v-cloak指令、条件指令家族、原义指令、循环指令、todolist案例、实例成员-符号、实例成员-计算属性、实例成员-属性监听、监听的案例、局部组件、全局组件、组件交互（父传子、子传父）

v-once指令: v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <div id="app"> <input type="text" v-model="msg">  <input type="text" v-model="msg" v-once> <p>{{ m

VueJS组件之全局组件与局部组件

全局组件所有实例都能用全局组件. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

VUE注册局部组件

// 局部组件命名规范 /* 1文件夹名大驼峰 MyLocalBtn.vue 2 使用的时候将驼峰转化为横杠 <my-local-btn></my-local-btn> */ MyLocalBtn.vue局部组件 <template> <div> <div>我输局部组件---{{valuea}}</div> </div> </template> <script> export default {

Vue.js中全局组件和局部组件的编写差异和注意事项

全局组件的编写方式: <div id='app'> <runoob></runoob> </div> <script> Vue.component('runoob',{ template:'<h1>Hello World!</h1>' }) new Vue({ el:'#app', }) </script> 局部组件的编写方式: <div id='app'> <runoob></r

vue.js 组件-全局组件和局部组件

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <!DOCTYPE html> <html> <body> <div id="app">  <my-component></my-compo

vue 组件全局注册和局部注册

全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-title',{ props:['title'], template:'<li v-on:click="$emit(\'change\')">{{title}}</li>' }) Vue.component('tab-content',{ props:['content

vue.js中的全局组件和局部组件

组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三个步骤: 1.创建组件构造器 2.注册组件 3.使用组件先来看一段代码: <!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使