Vue学习之--------组件嵌套以及VueComponent的讲解（代码实现）（2022/7/23）
欢迎加入刚建立的社区：http://t.csdn.cn/Q52km
加入社区的好处：
1、专栏更加明确、便于学习
2、覆盖的知识点更多、便于发散学习
3、大家共同学习进步
3、不定时的发现金红包（不多哈）
文章目录
1、效果图分析
2、先创建一个组件
//第一步、创建city组件
const city = Vue.extend({
template: `
<div class="cityDemo">
<h1>城市名称：{{cityName}}</h1>
<h1>城市美食：{{cityFood}}</h1>
<button @click="show">点击我弹窗</button>
</div>
`,
data() {
return {
cityName: "周口",
cityFood: "胡辣汤"
}
},
methods: {
show() {
alert("你好啊、Vue")
}
},
})
3、新创建一个组件、嵌套已经存在的组件
注意：注册组件的过程写在新组建中。并且在template中要使用组件才可以生效
//第一步创建 学校组件
const school = Vue.extend({
name: "myschoolOne",
template: `
<div class="cityDemo">
<h1>学校名称：{{schoolName}}</h1>
<h1>学校位置：{{schoolAddress}}</h1>
<city></city>
</div>
`,
data() {
return {
schoolName: "长沙大学",
schoolAddress: "湖南长沙"
}
},
//2、注册组件
components: {
city
}
})
4、第四步 注册组件
//创建Vue实例
new Vue({
el: '#App',
data: {
value: "Vue"
},
//第二步、注册组件（局部注册）
components: {
school
}
})
5、实现的效果
6、套娃式嵌套 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<app></app>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//第一步、创建city组件
const city = Vue.extend({
template: `
<div class="cityDemo">
<h1>城市名称：{{cityName}}</h1>
<h1>城市美食：{{cityFood}}</h1>
<button @click="show">点击我弹窗</button>
</div>
`,
data() {
return {
cityName: "周口",
cityFood: "胡辣汤"
}
},
methods: {
show() {
alert("你好啊、Vue")
}
},
})
//第一步创建 学校组件
const school = Vue.extend({
name: "myschoolOne",
template: `
<div class="cityDemo">
<h1>学校名称：{{schoolName}}</h1>
<h1>学校位置：{{schoolAddress}}</h1>
<city></city>
</div>
`,
data() {
return {
schoolName: "长沙大学",
schoolAddress: "湖南长沙"
}
},
//2、注册组件
components: {
city
}
})
//第一步创建学生组件
const student = Vue.extend({
name: "student",
template: `
<div class="studentDemo">
<h1>学生姓名：{{studentName}}</h1>
<h1>学生年龄：{{studentAge}}</h1>
</div>
`,
data() {
return {
studentName: 'zyz',
studentAge: 18
}
}
})
//定义App组件
const app = Vue.extend({
template: `
<div>
<school></school>
<student></student>
</div>
`,
components: {
school,
student
}
})
// 第二步、全局注册组件
// Vue.component('city', city)
//创建Vue实例
new Vue({
el: '#App',
data: {
value: "Vue"
},
//第二步、注册组件（局部注册）
components: {
app
}
})
</script>
</body>
</html>
7、测试效果
8、关于VueComponent
关于VueComponent：
1、school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2、我们只需要写
<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。3.特别注意：每次调用Vue.extend，返回的都是一个全新的：
VueComponent4.关于this指向：
(1)、组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是VueComponent实例对象。
(2)、new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是Vue实例对象。5、VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
Vue的实例对象，以后简称vm。
9、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1>展示的信息:{{name}}</h1>
<button @click="fun()">请点击我Vue</button>
<hr>
<!-- 第三步、编写组件标签 -->
<school></school>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//第一步创建 学校组件
const school = Vue.extend({
name: "myschoolOne",
template: `
<div class="cityDemo">
<h1>学校名称：{{schoolName}}</h1>
<h1>学校位置：{{schoolAddress}}</h1>
<button @click="show">点击我弹窗</button>
</div>
`,
data() {
return {
schoolName: "长沙大学",
schoolAddress: "湖南长沙"
}
},
methods: {
show() {
console.log("我是VueComponent", this)
}
},
})
//创建Vue实例
new Vue({
el: '#App',
data: {
name: "你好，VUE"
},
methods: {
fun() {
console.log("我是Vue", this)
}
},
//第二步、注册组件（局部注册）
components: {
school
}
})
</script>
</body>
</html>
10、实现的效果
Vue学习之--------组件嵌套以及VueComponent的讲解（代码实现）（2022/7/23）的更多相关文章
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
- Vue.js之组件嵌套
Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...
- vue学习之组件
组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...
- vue学习之四组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. 一.Vue.js组件系统 每一个 ...
- 浅谈vue学习之组件通信
vue用组件化简化了我们编写代码的复杂度,组件之间经常会出现数据传递的情况,那么组件之间是怎样通信的呢? 使用props传递数据 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内 ...
- Vue学习之--------组件的基本使用（非单文件组件）（代码实现）（2022/7/22）
文章目录 1.为啥要使用组件 2.基本使用 3.代码实例 4.测试效果 5.注意点 1.为啥要使用组件 好用啊.像堆积木一样 2.基本使用 Vue中使用组件的三大步骤: 一.定义组件(创建组件) 二. ...
- Vue学习之组件切换及父子组件小结（八）
一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...
- Vue学习笔记-组件通信-子传父（自定义事件）
props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中.我们应该如何处理呢?这个时候,我们需要使用自定义事件来完成.什么时候需要自定义事件呢?当子组件需要向父组件传递 ...
随机推荐
- ABP中的数据过滤器
本文首先介绍了ABP内置的软删除过滤器(ISoftDelete)和多租户过滤器(IMultiTenant),然后介绍了如何实现一个自定义过滤器,最后介绍了在软件开发过程中遇到的实际问题,同时给出了 ...
- B端产品需求分析与优先级判断
需求分析是产品经理工作中的重要一部分,而对B端产品经理来说,因为业务的特殊性,所以需求分析更考验产品经理的基础能力比如还原场景中业务调研的能力.需求价值分析中对价值的界定等. B端厂商的产品需求多数来 ...
- NC20273 [SCOI2009]粉刷匠
题目链接 题目 题目描述 windy有 N 条木板需要被粉刷. 每条木板被分为 M 个格子. 每个格子要被刷成红色或蓝色. windy每次粉刷,只能选择一条木板上一段连续的格子,然后涂上一种颜色. 每 ...
- nmtui 字符界面图形模式配置
一.通过nmtui配置网络参数 Linux系统配置网络参数的方式有很多种,其中最简单最直接的方式就是直接修改网卡配置文件,但这种方式也很容易出错,比如说IPADDR.NETMASK.GATEWAY等参 ...
- HDU4372 Count the Buildings （+题解：斯特林数）
题面 (笔者翻译) There are N buildings standing in a straight line in the City, numbered from 1 to N. The h ...
- flutter系列之:移动端的手势基础GestureDetector
目录 简介 Pointers和Listener GestureDetector 手势冲突 总结 简介 移动的和PC端有什么不同呢?同样的H5可以运行在APP端,也可以运行在PC端.两者最大的区别就是移 ...
- HMS Core基于地理位置请求广告，流量变现快人一步
对于想买车的用户来说,如果走在路上刷社交软件时突然在App里收到一条广告:"前方500米商圈里的某品牌汽车正在做优惠,力度大福利多."不管买不买,八成都会去看看,原因有三:距离近. ...
- 第五十八篇：webpack的Source Map
好家伙,Source Map没听过 1.什么是Source Map? 字面意义上来看应该是个好东西 Source Map 就是一个信息文件,里面储存着位置信息. 也就是说,Source Map 文件中 ...
- KingbaseES V8R6单实例外部备份故障案例
案例说明: 在KingbaseES V8R6单实例环境,配置外部备份服务器使用sys_backup.sh物理备份时,出现以下"WAL segment xxx was not archived ...
- KingbaseES 多列分区的方法与性能
前言 对于多列分区,可以选择单级多列的范围分区,也可以选择范围加子分区的方式.但二者在不同场景下对于性能是有差异的,这里的性能差异主要是分区裁剪引起的差异. 例子 创建两张分区表,采取不同的分区策略: ...