vue之父组件与子组件
1.背景
2.简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>父组件与子组件</h2>
<pre>
这个概念很好理解:
组件中 包含 组件 结构层了父组件与子组件的关系
</pre>
<hr>
<div id="app">
<!-- 5.使用父组件-->
<c-parent></c-parent>
</div>
<script>
// 1.创建组件构造器(子组件)
const componentChild = Vue.extend({
// 相当于一个模板
template: ' <div>' +
' <h5>我是 子组件</h5>' +
' 你好,我是自定义的子组件......' +
' </div>'
})
// 2.创建组件构造器(父组件组件)
const componentParent = Vue.extend({
template: '<div>' +
' <h4>我是 父类主键</h4>' +
' 你好,我是自定义的父组件......' +
' <c-child></c-child>' +
' </div>',
// 3.注册子组件到父组件中
components: {
'c-child': componentChild
}
}) let app = new Vue({
el: '#app',
// 4.注册父组件到vue实例中
components: {
'c-parent': componentParent
}
})
</script>
</body>
</html>
3.语法糖-简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>组件简写</h2>
<pre>
就是相当于把第一步创建组件构造器合并在注册组件的时候写
</pre>
<hr>
<div id="app">
<!-- 2.使用组件-->
<c-my></c-my>
</div>
<script>
let app = new Vue({
el: '#app',
// 1.创建主键并注册
components: {
'c-my': {
template: '<div>我是简写的组件</div>'
}
}
})
</script>
</body>
</html>
4.语法糖-简写-子父组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>组件简写-子父组件</h2>
<pre>
就是相当于把第一步创建组件构造器合并在注册组件的时候写
</pre>
<hr>
<div id="app">
<!-- 2.使用组件-->
<c-parent></c-parent>
</div>
<script>
let app = new Vue({
el: '#app',
// 1.创建主键并注册
components: {
'c-parent': {
template: '<div>我是简写的父组件<c-child></c-child></div>',
components: {
'c-child': {
template: '<div>我是简写的子组件</div>'
}
}
}
}
})
</script>
</body>
</html>
5.模板与js代码分离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>组件-模板与js分离</h2>
<pre>
在之前的写法中js与模板的html代码柔和在一起了,如果模板代码比较多写起来很痛苦,
必须将模板定义在外边,
实现很简单弄个id就可以了
</pre>
<hr>
<div id="app">
<!-- 2.使用组件-->
<c-parent></c-parent>
</div>
<!--父模板-->
<template id="parentId">
<div>我是模板分离的父组件
<c-child></c-child>
</div>
</template>
<!--子模板-->
<template id="childId">
<div>我是模板分离的子组件
</div>
</template>
<script>
let app = new Vue({
el: '#app',
// 1.创建主键并注册
components: {
'c-parent': {
template: '#parentId',
components: {
'c-child': {
template: '#childId'
}
}
}
}
})
</script>
</body>
</html>
6.组件中数据访问
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>组件-中数据的访问</h2>
<pre>
1.组件不能直接访问Vue实例数据,请自己测试,{{message}} 2.组件对象也有一个data属性(也可以有methods等属性，下面我们有用到)
只是这个data属性必须是一个函数
而且这个函数返回一个对象，对象内部保存着数据
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
<!-- 2.使用组件-->
<c-parent></c-parent> </div>
<!--父模板-->
<template id="parentId">
<div>我是模板分离的父组件,父模板中的数据:{{messageParent}}
<c-child></c-child>
</div>
</template>
<!--子模板-->
<template id="childId">
<div>我是模板分离的子组件
</div>
</template>
<script>
let app = new Vue({
el: '#app',
// 1.创建主键并注册
components: {
'c-parent': {
template: '#parentId',
// 组件中数据存放
data() {
return {
messageParent: '我是父组件中的数据'
}
},
components: {
'c-child': {
template: '#childId'
}
}
}
}
})
</script>
</body>
</html>
完美!
vue之父组件与子组件的更多相关文章
- vue中父级与子组件生命周期的先后顺序
1.vue的生命周期 2.views/createrCustormer.vue为父级 <template> <expressService /> </ ...
- vue 父组件传递子组件事件
在开发中,碰到一个需要从父组件传入方法,子组件点击触发,说白了就是,把方法传入给子组件调用 <el-col v-for='data in spreadFormat.icons' class=&q ...
- Vue中，父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- VUE 父组件与子组件交互
1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...
- Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- Vue系列之 => 父组件向子组件传值
父组件向子组件传递数据 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta c ...
- vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...
- vue 的父组件和子组件互相获取数据和方法
父组件主动获取子组件的数据和方法 一.ref(但不能实时更新获取) 1.调用子组件的时候 定义一个ref <child ref="headerChild"></c ...
随机推荐
- redis锁定商品解决并发售卖问题 RedisUtil工具类
redis锁定商品解决并发售卖问题 RedisUtil工具类 redis数据类型介绍: //伪代码,基本思路 //1.出redis,每次在选定商品之后,先检查redis是否已经锁定该商品,避免超卖.S ...
- org.springframework.beans.BeanUtils.copyProperties对象赋值的常见问题
org.springframework.beans.BeanUtils.copyProperties对象赋值的常见问题 //codepublic static void copyProperties( ...
- mysql 8.0 客户端
1.mysql 8.0 command line client 2.mysql workbench
- kettle从入门到精通 第七十一课 ETL之kettle 再谈http post，轻松掌握body中传递json参数
场景: kettle中http post步骤如何发送http请求且传递body参数? 解决方案: http post步骤中直接设置Request entity field字段即可. 1.手边没有现成的 ...
- C++面向对象多级菜单向Arduino的移植
前段时间写了一篇文章<C++面向对象语言自制多级菜单>,文中指出了可以将HeleMenu库进行移植,现已完成技术思路,特此记录. 一.特性 基本与上一篇文章指出的一致,只是将菜单显示和响应 ...
- ASP.NET Core使用Hangfire定时发布文章
ASP.NET Core使用Hangfire实现定时任务 前言 也是上了5天班,终于迎来了休息,抽空更新下博客,然后就是下周一公司会对我进行考核,希望考核能通过吧!!! 然后我想给博客添加一个定时发布 ...
- 面试官：transient关键字修饰的变量当真不可序列化？我：烦请先生教我！
一.写在开头 在这篇文章中记录一下之前自己面试时学到的东西,是关于transient关键字的,当时面试官问我IO的相关问题,基本上全答出来了,关于如何不序列化对象中某个字段时,我果断的选择了stati ...
- 『vulnhub系列』BEELZEBUB- 1
『vulnhub系列』BEELZEBUB- 1 下载地址: https://www.vulnhub.com/entry/beelzebub-1,742/ 信息搜集: 使用nmap扫描存活主机,发现主机 ...
- 开发板测试手册——USB 4G 模块、GPS 定位功能操作步骤详解（3）
目录 4 USB 4G 模块测试 41 4.1 网络功能测试 42 4.2 短信功能测试 43 4.3 GPS 定位功能测试 44 4.4 通话功能测试 45 4.5 测试程序编译 46 5 USB ...
- java中的即时编译（JIT）简介
Java发展这么多年一直长青,很大一部分得益于开发人员长期对其坚持不懈的优化:写得更少,跑得更快!JIT就是其中一项十分重要的优化. JIT全程Java Intime Compiler,即Java即时 ...