component 全局局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>template模版</title>
    <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-touch-fullscreen">
     <meta content="telephone=no,email=no" name="format-detection">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <script src="../assets/js/flexible_css.js"></script>
    <script src="../assets/js/flexible.js"></script>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <cai></cai>
         <panda></panda>
    </div>
     <panda></panda>
     <div id="box">
         <cai></cai>
          <panda></panda>    <!-- 局部组件有显示  只会在id为app元素范围内生效 -->

     </div>
</body>
<script type="text/javascript">
    //注册全局组件
    Vue.component(‘cai‘,{  ////  全局组件   cai是组件名
        template:`<div style="color:green">全局组件  名字cai</div>`
    })
    var app=new Vue({
            el:"#app",
            data:{
                message:"hello 你好",
            },
            components:{ //局部组件定义   只能用在 id为app的元素范围内
                "panda":{
                    template:`<div style="color:blue">局部注册的panda组件，只能在id为app的标签范围内使用</div>`
                }
            }
    })
    new Vue({
        el:"#box",
    })
    //组件定义两种方法，第一种:注意全局在构造器外面定义   第二种:局部在构造器里面定义  构造器里的components 是加s的，而全局注册是不加s的。
</script>
</html>

原文地址：https://www.cnblogs.com/jinsuo/p/8481457.html

时间： 2024-11-13 09:40:54

component 全局局部组件的相关文章

vue的全局组件和局部组件

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>全局组件.局部组件</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="a

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:全局组件与局部组件

全局组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="seg1"> <alert></alert> </div> <script

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

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教程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

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

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

Vue 局部组件和全局组件的使用

1 <template> 2 <div id="app"> 3  4  5 <mtmp></mtmp> 6 <h1>{{ title}}</h1&

87 全局和局部组件, 子父和父子之间的通信混入插槽路飞导航栏

主要内容: 1 全局组件: a : 定义一个全局组件 Vue.component( 'global-component', { template: `<div> 注意: template一定要包一层div <h3>{{wanrong}}</h3> <h2>{{wanrong}}</h2> </div>`, data() { return { wanrong: 'hello', } } } ); 2 全局组件的使用的两种方式: a: