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"> ...
随机推荐
- SpringBoot 日志系统
日志框架 开发一个大型系统的简易步骤: system.out.println("..") 将关键的数据在控制台输出 框架记录系统的一些运行时的信息,---日志框架. 牛逼的功能-- ...
- Shell脚本监控CPU、内存和硬盘利用率
1.监控CPU利用率(通过vmstat工具) #!/bin/bash #==================================================== # Author: l ...
- 粗糙集理论(Rough Set Theory)
粗糙集理论(Rough Set Theory) 一种数据分析处理理论. <粗糙集—关于数据推理的理论>. 数据挖掘(Data Mining)和知识发现(KDD). 集合近似定义的基本思想及 ...
- 用Python代码写的计算器
1.极限压缩版 import re, functools def cal(formula): while re.search('(?:\d+\.?\d+|\d+)[+\-*/]', formula): ...
- idea创建maven工程
1.右键更目录,new->Module 2.选择Maven,并配置自己的SDK,一般默认的也可以用,点击next进入下一步 3.配置pom文件里的GroupId和Artifactld 4.配置m ...
- PHP 核心特性 - 错误处理
错误与异常 错误,可以理解程序本身的错误,例如语法错误.而异常则更偏向于程序运行不符合预期或者不符合正常流程:对于 PHP 语言而言,处理错误和处理异常使用的机制完全不同,因此很容易让人产生困惑. 例 ...
- C#属性方法 构造函数（不知道自己理解的对不对）
using System; namespace test { class Program { static void Main(string[] args) { Cat kitty = new Cat ...
- jwt认证生成后的token后端解析
一.首先前端发送token token所在的位置headers {'authorization':token的值',Content-Type':application/json} 在ajax写 //只 ...
- GO基础之函数的高级用法
一.可变参数 支持可变长参数列表的函数可以支持任意个传入参数,比如fmt.Println函数就是一个支持可变长参数列表的函数. package main import "fmt" ...
- Java 的 IO 流
接着上一篇的 “Java 的 File 类” 的随笔,在File类的基础上,我们就走进Java的IO流吧. 流的概念和作用 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在 ...