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"> ...
随机推荐
- application context not configured for this file于spring框架使用中的原因
spring配置文件中时常会出现这个提示,翻译过来大概意思就是没有配置该文件到项目中 于是进入到Project Structure中查看 可以很明显的看到下面有个感叹号,大概意思是下面的文件没有匹配 ...
- leetcode题解：两数之和
给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元 ...
- [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- 解决tail命令提示“tail: inotify 资源耗尽，无法使用 inotify 机制，回归为 polling 机制”
报错的原因是 inotify 跟踪的文件数量超出了系统设置的上限值,要是这个问题不经常出现可以使用临时解决方法,或者写入配置文件来永久解决. 临时解决方法: # 查看 inotify 的相关配置 $ ...
- Java replace() 方法 替换字符 也可用于 js 中
JAVA中: public class Test { public static void main(String args[]) { String Str = new String("he ...
- java获取当前年份、月份和日期字符串等
Java获取当前年份.月份和日期是通过Calendar类的实例对象来获取的. 首先创建一个Calendar类的实例对象,Calendar类属于java.util包. Calendar calendar ...
- 干货：.net core实现读取appsettings.json配置文件（建议收藏）
看好多人不懂在.NET CORE中如何读取配置文件,我这里分两篇,这一篇介绍怎样通过appsettings.json配置读取文件信息.这里我会教大家两种方式: 第一种直接放到通用类库,那里想调往那调. ...
- goweb-mysql连接
操作 数据库 Go 语言中的 database/sql 包定义了对数据库的一系列操作.database/sql/driver 包定义了应被数据库驱动实现的接口,这些接口会被 sql 包使用.但是 Go ...
- js获取屏幕以及元素宽高的方法
一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:w ...
- C#基本语法<三>_WindowsFrom
winform 在windows form开发过程中还是有很多坑需要注意,包括一些重要代码记不得,在这个文件中进行汇总更新. 命名规则 M结尾表示model A结尾表示消息 Object表示 ,底层接 ...