vue组件定义方式，vue父子组件间的传值
vue组件定义方式，vue父子组件间的传值
<!DOCTYPE html>
<html lang="zh-cn"> <head>
<meta charset="utf-8">
</head> <body>
<div id="app">
<my-nav></my-nav>
<hr>
<my-nav2></my-nav2>
<hr>
<my-demo></my-demo>
<hr>
<script-nav></script-nav>
<hr>
<my-tmp></my-tmp>
<hr>
<button @click="show = !show">切换动态组件</button>
<component :is="show ?'my-nav':'my-nav2'"></component>
<hr>
<parent></parent>
</div>
<hr>
<div id="myNav"></div>
<script type="nav-template" id="my-nav">
<h2>我是script中的模板</h2>
</script>
<template id="my-tmp">
<h2 bgcolor="pink">我是template中的模板</h2>
</template>
<script src="vue.js"></script>
<script>
//组件: 一个大对象
// 注册组件 (两种编写方式)
// 注册组件，传入一个扩展过的构造器
// Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
// Vue.component('my-component', { /* ... */ }) //1.全局组件 （注册组件的位置在全局环境）
//方式一：
//1.1定义组件
var myNav = Vue.extend({
template: '<h3>我是my-nav组件->{{msg}}</h3>',
data() {
return {
msg: '我是组件中的数据'
}
}
})
//挂载到Vue的构造函数上，所有的Vue实例（vm）都共享这个组件，
//所以就成了全局组件
Vue.component('my-nav', myNav);
//全局组件也可以实例化后直接绑定到具体的元素上
//原理：因为myNav继承自Vue，所以也可以作为构造函数
//同样具有Vue的实例方法.$mount()
new myNav().$mount('#myNav'); //方式二： 第二个参数是一个对象
Vue.component('my-nav2', {
template: '<h4>我是my-nav2222222222222组件->22222222</h4>',
});
//2.局部组件 （注册组件的位置在Vue的选项中）
// 局部组件可以在Vue 的选项（配置项）中定义（my-demo），也可以使用全局已定义好的组件(my-nav) var vm = new Vue({
data: {
msg: 13,
show: true
},
components: {
'my-demo': {
template: '<h2>我是一个纯内部组件</h2>'
},
'my-nav': myNav, //我是一个使用了全局定义的内部组件
'script-nav': {
template: '#my-nav'
},
'my-tmp': {
template: '#my-tmp'
},
'parent': {
template: '<h2>我是父组件-><child :msg-p="msgP" @childMsg="childMsg"></child>{{msgC}}</h2>',
data() {
return {
msgP: '我是父组件中的数据',
msgC:'',
}
},
methods:{
childMsg(msg){
this.msgC = msg
}
},
components: {
'child': {
template: '<div><h2>我是子组件->这是我拿到的父组件的数据->{{msgP}}</h2><button @click="send">发送</button></div>',
// props:['msgP'], //方式一['','']
props:{
msgP:String
},
data() {
return {
msgC: '我是子组件中的数据'
}
},
methods:{
send(){
//vm.$emit('事件名称',数据)
this.$emit('childMsg',this.msgC);
vm.$emit('test', 'hi')
}
}
},
} }
}
}).$mount('#app'); vm.$on('test', function (msg) {
console.log(msg)
setTimeout(function(){
vm.$off()
},5000)
}) //组件模板
//1. template: '<h4>我是my-nav组件</h4>',
//组件的模板：在实际项目开发中，模板的标签一般很多，直接写到js中不是很方便
//2.可以将模板单独放在某个地方
//2.1 <script type="nav-template" id="my-nav">
//2.2 <template id="my-tmp"> //3.动态组件
// <component :is="组件名称"></component> //4.父子组件之间的通信
//4.1 子组件获取父组件的数据 （属性传值）
// 在父组件中调用子组件，给子组件绑定一个自定义属性，属性值为要传过云的值
// 在子组件选项中有个 props获取这个自定义属性值，方法有两种：
// 4.1.1 数组形式 props : ['属性名']
// 4.1.2 对象形式 props : {'属性名'：String,'属性名':'属性值类型'}
//
//4.2 父组件获取子组件的数据 （事件系统--方法传参）
//原理：子组件触发了父组件上的自定义事件，自定义事件的参数就是子组件要传给父组件的值。 </script>
</body> </html>
vue组件定义方式，vue父子组件间的传值的更多相关文章
- Vue组件通信之非父子组件传值
前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是 ...
- 7.vue组件(二)--双向绑定,父子组件访问
本文主要说两件事 1. 如何实现父子组件之间的双向绑定 2. 父组件如何访问子组件的data,method, 子组件如何访问父组件的data,method等 一. 如何实现父子组件之间的双向绑定 案例 ...
- 在vue中使用setter改写父子组件传的值
概述 最近在用muse ui的时候碰到一个问题,简单来说是这样的,父子之间传值,父组件和子组件使用相同的props命名,并且子组件不用emit,而用等号赋值. 最后使用计算属性的setter函数解决了 ...
- Vue 组件&组件之间的通信 父子组件的通信
在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...
- vue的$emit 与$on父子组件与兄弟组件的之间通信
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一.父组件传值给子组件 父组件 ...
- 组件基础（非父子组件传值）—Vue学习笔记
最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...
- vue组件通信之非父子组件通信
什么顺序不顺序的.. 先来说说非父子组件通信. 首先,我们先来了解下vue中的 1.$emit 触发当前实例上的事件,附加参数都会传给监听器回调. 2.$on 监听当前实例上的自定义事件.事件可以 ...
- vue.js使用props在父子组件之间传参
本篇文章是我参考官方文档整理的,供大家参考,高手勿喷! prop 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子 ...
- vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
随机推荐
- 《软件安装》VMware Workstation 不注册 下载
问答环节 问:为什么要下载安装VMware Workstation 答:VMware Workstation 可以安装虚拟机,我们可以把我们安装的一些软件装在虚拟机上面,防止自己的电脑卡顿(软件装多了 ...
- Unable to open debugger port: java.net.SocketException
网上都说是tomcat端口被占用,其实不是,这是因为文件权限不够,脚本不能执行,debug当然不能接受网络连接的数据 可以在Event Log里看到 所以只需要更改文件的级别就可以了(可读可写可执行) ...
- FreeRTOS操作系统教程发布，支持F103，F407和F429，配套145个例子，1200页教程
前言说明:1. 首先感谢大家对我们安富莱电子的支持. 2. FreeRTOS最大的优势就是开源免费,商业使用的话不需要用户公开源代码,也不存在任何版权问题,是当前小型嵌入式操作系统 市场使用率最高 ...
- C语言中的顺序点
C语言盲点1.函数参数的求值顺序依赖于编译器,例如f(a,a++);是先求a++还是求a不一定 2.C语言中的大多数运算符对其操作数的求值顺序也依赖于编译器 警告int i = f() * g();这 ...
- php中文乱码原因和维修方法
一．首先是PHP网页的编码 1.如果欲使用gb2312编码,那么php要输出头:header(“Content-Type: text/html; charset=gb2312”),静态页面添加,所有文 ...
- 你可能会忽略的 Git 提交规范
一.为什么需要规范? 无规矩不成方圆,编程也一样. 如果你有一个项目,从始至终都是自己写,那么你想怎么写都可以,没有人可以干预你.可是如果在团队协作中,大家都张扬个性,那么代码将会是一团糟,好好的项目 ...
- Oracle - SPM固定执行计划(二)
一.前言 前面文章(https://www.cnblogs.com/ddzj01/p/11365541.html)给大家介绍了当一条sql有多个执行计划时,如何通过spm去绑定其中一条执行计划.本文将 ...
- 架构视角 - DDD、TDD、MDD领域驱动、测试驱动还是模型驱动？
提出问题 「领域驱动设计」之于微服务,好比麦当劳之于汉堡(个人更喜欢肯德基,汉堡要大些,麦当劳的汉堡,想吃顿饱饭,请先给我上6个
- 松软科技前端课堂：JavaScript 数值方法
Number 方法帮助您处理数值. Number 方法和属性 原始值(比如 3.14 或 2016),无法拥有属性和方法(因为它们不是对象). 但是通过 JavaScript,方法和属性也可用于原始值 ...
- tcprstat和tcpstat性能监控
tcprstat分析服务的响应速度利器 tcprstat是percona用来监测mysql响应时间的.不过对于任何运行在TCP协议上的响应时间,都可以用. 下面是一个监控示例,监控分析mysql的 ...