<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- //使用组件 -->
<handsome></handsome>
<component2></component2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 局部组件 使用的三部曲：1、创建这个组件 2、注册这个组件 3、引用这个组件
//组件是相互独立的 不能直接跨作用域 实例也是一个组件 实例拥有生命周期函数 所以组件也拥有生命周期函数
 
let obj={school:'zfpx'};//组件共用数据的情况
 
//注意：如果组件共用了数据 会导致同时更新（不符合独立性）
//子组件不能直接使用父组件的数据（组件间的数据交互）
//组件理论上可以无限嵌套
//创建组件
let handsome={
// 自己的模板可以用自己的data
template:'<div>哈哈哈哈哈哈哈{{school}}</div>',
data(){
　　return obj
}
}
let component2={
// 这里的引号问题可以用es6的模板字符串用``来包裹
// 点击自定义的标签 school的值变成hello
// 但是我们发现 由于obj这个数据是共享的 所以改变了一个的同时 下一个也会改变
// 这就不符合组件独立性的性质了
template:`<div @click="fn">组件2{{school}}</div>`,
data(){ //!!!!!注意这里的data要是函数 这里为什么data要是函数的原因 因为函数在
　　return obj //调用的时候可以返回对象 由于返回的对象的地址不同 所以可以让组件独立
},
methods:{
fn(){
this.school='hello'
}
}
}
let vm=new Vue({
el:'#app',
components:{//注册这个组件
handsome:handsome,//在es6中名字一样可以写一个,
component2
},
data:{
a:1
}
})
</script>
</body>
</html>

Vue创建局部组件的更多相关文章

  1. vue中局部组件的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. VUE注册局部组件

    // 局部组件命名规范 /* 1文件夹名大驼峰 MyLocalBtn.vue 2 使用的时候 将驼峰转化为横杠 <my-local-btn></my-local-btn> */ ...

  3. Vue创建全局组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue创建头部组件示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  5. vue（3）—— vue的全局组件、局部组件

    组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...

  6. Vue其他指令-组件-全局-局部-组件的交互父传子

    v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  7. Vue 中的组件

    VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...

  8. vue.js 中组件的使用

    Vue中组件的使用 方式一 1.使用Vue.extend创建组件 var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件& ...

  9. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

随机推荐

  1. vue学习【四】vuex快速入门

    大家好,我是一叶,今天我们继续踩坑.今天的内容是vuex快速入门,页面传值不多的话,不建议vuex,直接props进行父子间传值就行,使用vuex就显得比较臃肿. 我们先预览一下效果,如图1所示. 图 ...

  2. atxserver2-rethinkdb的一些基础操作

    因为我只需要一些基础操作就好,所以在web端的 Data Explorer 操作,首先启动  rethinkdb.exe,然后登陆网页端, 下面是一些基础操作的语句, 一.创建表r.db(‘atxse ...

  3. laravel-admin 表单提交报错

    Method App\Admin\Controllers\GoodsSpecController::store does not exist. Method App\Admin\Controllers ...

  4. useradd 创建用户

    useradd 创建用户 1.命令功能 useradd 创建一个新用户或者更改默认新用户信息. 2.语法格式 useradd  option  username useradd  -D  option ...

  5. Registry key 'Software\JavaSoft\Java Runtime Environment\CurrentVersion' has value '1.8', but '1.7'

    第一种方法:安装1.8之前安装了1.7,将1.7卸载就好了. 第二种方法:删掉Windows\System32下的java.exe, javaw.exe 就行了,但是安装的1.8的jdk会回到1.7的 ...

  6. kloxo增加了域名，怎么不能访问？如何重启web服务？

    kloxo增加了域名,怎么不能访问?这是因为需要重新启动web服务. 有时候网站打不开,也可以尝试重启web服务. 重启web服务方法: 登录kloxo后台-->左边栏:服务器linux --& ...

  7. Noip2018退役记。

    下面是边考试边写的严肃版退役记\(:D\) Day0 其实我本来想取个这个名字:\(NOIP2018\)提高组复赛试题解析 但是这个博客自己求生欲望太强自己改名了. 先占个坑. noip考前毒奶 \( ...

  8. 【POJ2152】Fire

    题目大意:给定一棵 N 个节点的无根树,点有点权,边有边权,现需要选出一个点集,满足树上任意一个点到该点集的距离不超过该点的给定值,求选出点集点权的最小值是多少. 题解:可以发现,对于以 i 为根的子 ...

  9. AngularJS的目录结构

    templates/ _login.html _feed.html app/ app.js controllers/ LoginController.js FeedController.js dire ...

  10. jquery even选择器 语法

    jquery even选择器 语法 作用::even 选择器选取每个带有偶数 index 值的元素(比如 2.4.6).index 值从 0 开始,所有第一个元素是偶数 (0).最常见的用法:与其他元 ...