Vue 组件基础完整示例2
简介
此页面可以直接复制运行，包含以下应用：
Vue slot插槽使用
Vue v-model使用
Vue props使用
父子组件数据传递
element-ui使用
HTML方式注册子组件，可以将子组件数据写在一个js文件中，用标签引入，然后将子组件对象置入components中
Live Demo 在线示例
Live Demo
提示
不建议用HTML模式开发项目，建议使用vue-cli3创建项目，使用单文件组件模式开发
Vue cli3
根组件实例和组件（实例）的区别：
https://segmentfault.com/q/1010000012918351
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.10.1/index.js"></script>
<link href="https://cdn.bootcss.com/element-ui/2.10.1/theme-chalk/index.css" rel="stylesheet">
<style>
#app{
display: flex;
justify-content: space-between;
}
.parent, .child{
width: 45%;
}
.el-card{
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<div class="parent">
<el-card>
<div slot="header">
<span>父组件</span>
</div>
<el-input v-model="ParentMsg"></el-input>
<el-button type="primary" @click="changeChild" style="margin-top: 30px">改变子组件的msg</el-button>
</el-card> </div>
<div class="child">
<el-card>
<div slot="header">
<span>子组件</span>
</div>
<child1 v-show="display" :parent-msg="childMsg"></child1>
<child2 @change-data-from-child="changeParent"></child2>
</el-card>
</div>
</div>
<script>
new Vue({
el: '#app',
data(){
return {
display:true,
ParentMsg:"Hello This is Parent",
childMsg: 'Hello, 我来自父组件的数据'
}
},
methods: {
changeParent(data){
this.ParentMsg = data
},
changeChild(){
this.childMsg = '我被父组件改变了'
}
},
components: {
'child1': {
props: { //定义子组件的prop，用于父组件传递数据到子组件
parentMsg: {
type: String,
default: ''
}
},
template: '<div>\n' +
' <h2 v-show="msgDisplay">{{msg}}</h2>\n' +
' <p>{{parentMsg}}</p>\n' +
' <el-button @click="toggleMsgDisplay" type="success">切换子组件1中的信息显示隐藏</el-button>\n' +
' </div>', data() {//Vue中component的data必须通过function() return
return {
msg: 'This is a Child Component1!',
msgDisplay: true
}
},
methods: {
toggleMsgDisplay() {
this.msgDisplay = !this.msgDisplay
}
}
},
'child2':{
template:"<el-button type='primary' @click='changeParentData' style='margin-top: 30px'>我是子组件2按钮,点击改变父组件内容</el-button>",
data () {
return {
msg:"点击了子组件2按钮"
}
},
methods:{
changeParentData () {
this.$emit('change-data-from-child', '我来自是子组件2') //事件传递用kebab-case风格
}
}
}
},
})
</script> </body>
</html>
Vue 组件基础完整示例2的更多相关文章
- Vue 组件基础完整示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue组件基础
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- vue组件基础之父子传值
可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...
- Vue.js 学习笔记之四：Vue 组件基础
到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
- vue组件基础之创建与使用
一.创建组件 <script src="vue.js"></script> <!--引入vue.js文件--> <div id=" ...
- Vue组件基础知识总结
组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树. 那么什么是组件呢?组件可以扩展HTML元素,封装 ...
- vue—组件基础了解
什么是组件? 组件是vue中的一个可复用实例,所以new Vue()是vue中最大的那个组件,根组件,有名字,使用的时候以单标签或双标签使用 vm = newVue() 是最大的组件,具有很多实用性的 ...
- Vue组件的基础用法（火柴）
前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...
随机推荐
- 可嵌入的脚本引擎 Jx9
Jx9是一个可嵌入的脚本引擎,基于JSON实现了图灵完备(Turing complete)的编程语言. Jx9 是那些需要流行和高效率脚本支持应用程序(比如:游戏.数据库系统,文本编辑器,网络应用程序 ...
- 11 - Vue模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...
- python--第六天练习题
#1.正则表达式计算 origin = "1 - 2 * ( ( 60 - 30 + ( -40.0 / 5 ) * ( 9 - 2 * 5 / 3 + 7 / 3 * 99 / 4 * 2 ...
- Oracle 物理结构（二） 文件-口令文件
一.口令文件作用 1.口令文件基本介绍 Oracle数据库口令文件存放有超级用户的口令及其他特殊用户的用户名/口令. 口令文件在数据库创建时,自动创建,存放在$ORACLE_HOME/dbs. 此文件 ...
- PC端使用program來CHGUSRPRF
執行CHGUSRPRF命令需要*SECADM 權限,但通常Security部門不允許Grant這個這麼大的權限,爲了達到目的,改用下面的方法 1. Create CL program 注意裏面一定要用 ...
- 多路IO复用模型--select, poll, epoll
select 1.select能监听的文件描述符个数受限于FD_SETSIZE,一般为1024,单纯改变进程打开的文件描述符个数并不能改变select监听文件个数 2.解决1024以下客户端时使用se ...
- python3.5+win7 安装 numpy 和scipy的总结
1.安装numpy. 官网下载numpy.下载地址为https://pypi.Python.org/pypi/numpy.选择与Python版本相对应的numpy版本.之后在python35 ...
- ECMAScript 5.0 基础语法（上）
银子: 一般来说,一门编程语言的基础语法都是大同小异的.比如,python的基础语法,包括:数据类型,变量,作用域,运算符,流程控制(if...else...语句),循环,编码,数据类型的操作(增删改 ...
- MySQL数据分析－（13）表操作补充：索引
大家好,我是jacky朱元禄,很高兴继续跟大家学习MySQL数据分析实战,今天跟大家分享的主题是表补充之索引: (一)前面课程的小节以及本节课程的逻辑梳理 在正式分享主题之前,jacky先跟大家捋顺一 ...
- CF1200B
CF1200B 解法: 贪心.当在第i列时,尽可能多的取走第i列的木块使得袋子里的木块尽可能多 CODE: #include<iostream> #include<cstdio> ...