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"> ...
随机推荐
- Spring afterPropertiesSet方法
1.init-method方法,初始化bean的时候执行,可以针对某个具体的bean进行配置.init-method需要在applicationContext.xml配置文档中bean的定义里头写明. ...
- 使用ping网络工具编写Shell脚本程序实现网络连接故障初步排查
在学习ping命令的时候,突发奇想:为何不使用ping命令对网络连接故障进行排查? 具体思路: 1. ping 127.0.0.1 (虚拟网卡地址)以检查主机的TCP/IP协议栈是否正常. 2. p ...
- adb devices无法连接mumu模拟器
解决方案: 如果你的android环境能够直接访问 adb 的相关指令.只需要把mumu模拟器打开 然后打开cmd -> 输入 adb connect 127.0.0.1:7555 就能直接连上 ...
- LeetCode 第70题动态规划算法
导言 看了 动态规划(https://www.cnblogs.com/fivestudy/p/11855853.html)的帖子,觉得写的很好,记录下来. 动态规划问题一直是算法面试当中的重点和难点, ...
- 使用过Redis，我竟然还不知道Rdb
目录 使用过Redis,那就先说说使用过那些场景吧 Rdb文件是什么,它是干什么的 分析工具 小结 联想 推荐阅读 使用过Redis,那就先说说使用过那些场景吧 字符串缓存 //举例 $redis-& ...
- SpringBoot控制台版图书借阅程序
// 实验存档... 效果图: 完整程序:https://pan.baidu.com/s/1-d1J90dkEtM0WKkABu0K0Q 提取码:hcnm DAO层代码由MyBatis Generat ...
- [错误]Caused by: org.apache.spark.memory.SparkOutOfMemoryError: Unable to acquire 65536 bytes of memory, got 0
今天,在运行Spark SQL代码的时候,遇到了以下错误: Caused by: org.apache.spark.SparkException: Job aborted due to stage f ...
- 04-JVM垃圾收集器详解
1.垃圾收集器的种类 垃圾收集算法是内存回收的方法论,垃圾收集器是内存回收的具体实现工具.目前没有万能的垃圾收集器,需要根据具体的应用场景选择合适的垃圾收集器. 1.1Serial收集器(-XX:+U ...
- 通俗易懂，什么是.NET/.NET Framework/.NET Core/.Net Standard?
什么是.NET?什么是.NET Framework?本文将从上往下,循序渐进的介绍一系列相关.NET的概念,先从类型系统开始讲起,我将通过跨语言操作这个例子来逐渐引入一系列.NET的相关概念,这主要包 ...
- 四步解决linux上sublime无法输入中文的问题
转载请标明博客的地址 本人博客和github账号,如果对你有帮助请在本人github项目AioSocket上点个star,激励作者对社区贡献 个人博客:https://www.cnblogs.com/ ...