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"> ...
随机推荐
- linux常用命令总结篇
关于linux的一些基础命令,以前也学过,但是长时间不用还是感觉生疏了,所以记录下来以便后期温故知新. 1. cd:cd命令用来切换工作目录至dirname.cd ~ 进入用户主目录,cd - 进入之 ...
- angularjs link compile与controller的区别详解，了解angular生命周期
壹 ❀ 引 我在 angularjs 一篇文章看懂自定义指令directive 一文中简单提及了自定义指令中的link链接函数与compile编译函数,并说到两者具有互斥特性,即同时存在link与c ...
- IT兄弟连 HTML5教程 HTML5表单 新增的表单属性3
9 novalidate novalidate是属性规定在提交表单时不应该验证form和input域.novalidate属性适用于的<input>类型有:text.search.url ...
- BOM介绍以及方法
BOM介绍和window对象的方法 一.BOM对象 (浏览器对象模型 BOM) 1.window alert() confirm() prompt() setInterval() setTimeo ...
- Linux中，Tomcat 怎么承载高并发（深入Tcp参数 backlog）
一.前言 这两天看tomcat,查阅 tomcat 怎么承载高并发时,看到了backlog参数.我们知道,服务器端一般使用mq来减轻高并发下的洪峰冲击,将暂时不能处理的请求放入队列,后续再慢慢处理.其 ...
- 关于如何将sublime配置C++环境的总结
首先我得说,嗯,为了这个玩意为翻烂了99%的百度能搜到的文章.研究了关于Win7 32位,64位,Win10版本的配置,Win10的已经写好了一篇文章,可是Win7党(我是都用的,在家用Win10,学 ...
- TypeScript 装饰器的执行原理
装饰器本质上提供了对被装饰对象 Property Descriptor 的操作,在运行时被调用. 因为对于同一对象来说,可同时运用多个装饰器,然后装饰器中又可对被装饰对象进行任意的修改甚至是替换掉实 ...
- Actor模型（分布式编程）
Actor的目的是为了解决分布式编程中的一系列问题.所有消息都是异步交付的,因此将消息发送方与接收方分开,正是由于这种分离,导致actor系统具有内在的并发性:可以不受限制地并行执行任何拥有输入消息的 ...
- sql server 2014 卸载
遇到一个沙雕工程人员~二话不装给我装了2014的版本,实际开发的时候用的是2012....欸~ 1.打开服务 2.打开控制面板下的程序与功能 3选中红框点击卸载与更改----->选择删除 4.然 ...
- Spring Boot 2.2.2.RELEASE 版本中文参考文档【3.2 - 3.10】
Spring Boot 2.2.2.RELEASE版本中文文档持续更新中~如有需要获取参考文档文件,关注公众号JavaSo,回复“参考文档”即可. 3.2 结构化代码 Spring Boot不需要任何 ...