Vue 组件 传值
注意 Vue模板只能有一个对象，要想用多个对象时用div包裹
一、父组件->子组件 通过props
1、子组件：
声明：proprs =[‘xx’]，xx是在父组件中引用子组件，子组件的属性(template)
引用：{{xx}}
2、父组件
声明数据：oo
父组件template中引用子组件，属性的值为oo
记忆：父->子 传值，父要有值
a、传递字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <button>{{msg}}</button> -->
</div>
<script src="./js/vue.js"></script>
<script>
// Vue(父)->App(子)
//1. 声明子组件
let App = {
data(){
return {
text:"咬我",
}
},
// b.使用声明的变量
template: `
<div>
<p>{{text}}</p>
<h4>{{abc}}</h4>
</div>
`,
// a.声明props
props:['abc'],
}
new Vue({
el: "#app",
data(){
// c.声明值
return {
msg: "点我",
}
},
// 若 Vue对象有template，则template优先级高
// 3.引用子组件
// d.在父组件中声明，子组件的属性和值
template: `
<div>
<button>{{msg}}</button>
<App :abc="msg"></App>
</div>
`,
// 2.挂载子组件
components:{
App,
}
})
</script>
</body>
</html>
b、传递对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"> </div>
<script src="./js/vue.js"></script>
<script>
let App = {
data(){
return {
msg: "Vue"
}
},
// 2.
template: `
<p>{{mpost.title}}</p>
`,
// 1.
props: ['mpost']
}
new Vue({
el: "#app",
data(){
return {
// 3
post: {
id: 1,
title: 'My Journey with Vue'
}
}
},
template: `
<div>
<App :mpost="post"></App> </div>`,
components:{
App,
},
})
</script>
</body>
</html>
或
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"> </div>
<script src="./js/vue.js"></script>
<script>
let App = {
data(){
return {
msg: "Vue"
}
},
// 2.
template: `
<p>{{id}}</p>
`,
// 1.
props: ['id', "title"]
}
new Vue({
el: "#app",
data(){
return {
// 3
post: {
id: 1,
title: 'My Journey with Vue'
}
}
},
template: `
<div>
<App :id="post.id" :title="post.title"></App> </div>`,
components:{
App,
},
})
</script>
</body>
</html>
c、传递数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button>{{text}}</button>
<!-- 3.声明属性，属性名和子组件中的声明的props变量名一致 -->
<!-- 4.传值，父组件的数据 -->
<App :person="PersonArr" />
</div>
<script src="./js/vue.js"></script>
<script>
let App = {
data(){
return { }
},
// 2.使用变量
template: `
<div>
<p>{{person}}</p>
<ul>
<li v-for="per in person">
<span>姓名：{{per.name}}</span>
<span>年龄：{{per.age}}</span>
</li>
</ul>
</div>
`,
// 1.在props中声明变量
props: ['person'] }
new Vue({
el: "#app",
data(){
return {
'text':"点我",
PersonArr: [
{'name': 'tom', 'age': 24},
{'name': 'alex', 'age': 34}
],
}
},
components:{
App,
}, })
</script>
</body>
</html>
传递数组
二、子组件到父组件
1、子组件
触发事件
this.emit(父组件的自定义事件及@后面的名字, 传递值)，父组件自定义的地方：子组件引用的地方
2、父组件
在父组件引用子组件的地方，自定义事件的函数接收值
注意：变量名，尤其时自定义监听方法的名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>"数值":{{msg}}</p>
<App @clickfun="foo">{{msg}}</App> </div>
<script src="./js/vue.js"></script>
<script>
// 触发
let App = {
data(){
return {
id: 1,
}
},
template:`
<div>
<button @click="clickHandler">{{id}}</button>
</div>
`,
methods:{
clickHandler(){
this.id ++ ;
this.$emit('clickfun', this.id)
}
}
}
// 接收
new Vue({
el: "#app",
data(){
return {
msg: "1",
}
},
methods:{
foo(val){
alert(val);
this.msg = val;
}
},
components:{
App,
}
})
</script>
</body>
</html>
other
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>数值：{{msg}}</p>
<my-div @clickfun="foo"></my-div>
</div>
<script src="./js/vue.js"></script>
<script>
var bus = new Vue()
// 触发
Vue.component('my-div', {
data(){
return {
id: 1,
}
},
template:`
<div>
<button @click="clickHandler">{{id}}</button>
</div>
`,
methods:{
clickHandler(){
this.id ++ ;
this.$emit('clickfun')
}
}
// template: `<button>点击</button>`,
})
// 接收
var app = new Vue({
el: "#app",
data(){
return {
msg: "点我",
text: "什么时候能交到女朋友"
}
},
methods:{
foo(){
alert(1);
}
}, })
</script>
</body>
</html>
三、平行组件传值(包含父组件->子组件 和 子组件->父组件）
注意：
1、声明事件：
$on(自定义事件名称, 接收数据的函数)
2、触发事件
$(emit)(声明事件的名称，传递的数据)
3、前提
两个方法必须绑定在同一实例化对象(bus)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{newmsg}}</p>
<App /> </div>
<script src="./js/vue.js"></script>
<script>
let bus = new Vue()
// 触发
let App = {
data(){
return {
text: "点我",
msg: "Vue好难"
}
},
template: `<div>
<button @click="clickHandler">传递</button>
</div>`,
methods:{
clickHandler(){
bus.$emit('testData', this.msg)
}
}
}
// 接收
new Vue({
el: "#app",
data(){
return {
newmsg: "avc",
}
},
components:{
App
},
created(){
bus.$on('testData', (val)=>{
alert(val)
this.newmsg = val;
});
},
})
</script>
</body>
</html>
另一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="clickHandler">{{msg}}</button>
<my-div></my-div>
</div>
<script src="./js/vue.js"></script>
<script>
var bus = new Vue()
// 接收
Vue.component('my-div', {
data(){
return {
text: "dads"
}
},
template:`
<div>
<hr />
<p>{{text}}</p>
</div>
`,
created(){
bus.$on('testData', (val)=>{
// console.log(val)
this.text = val;
})
},
// template: `<button>点击</button>`,
})
// 触发
var app = new Vue({
el: "#app",
data(){
return {
msg: "点我",
text: "什么时候能交到女朋友"
}
},
methods:{
clickHandler(){
bus.$emit('testData', this.text);
}
},
})
</script>
</body>
</html>
父->子
Vue 组件 传值的更多相关文章
- Vue—组件传值及vuex的使用
一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue组件传值方法调用
1.子组件改变父组件的值 <father label="云盘快照" name="name2"> <son :props='rows' @ ...
- vue ---- 组件传值之间使用 v-model
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- vue组件传值的三种方式，文字版解释
父传子: 当子组件子父组件中当标签使用的时候,给子组件添加一个自定义属性,值为需要传递的值(如: <Child v-bind:parentToChild="parentMsg" ...
- Vue组件传值，父传子，子传父，非父子组件
vue3中传值方式: 1.父组件向子组件传值 父组件Blog.vue <template> <div id="blog"> <Alert v-if=& ...
- vue组件传值 part2
非父子组件传值 轻量级 视图层框架 复杂组件间传值,引进其他的工具或者设计模式 1.vuex 2.总线机制 //main line 1.在main.js中注册全局的bus Vue.prototype. ...
- Vue组件传值（二）之 非父子组件传值
Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...
- Vue组件传值（一）之 父子之间如何传值
Vue中组件之间是如何实现通信的? 1.父传子: 父传子父组件通过属性进行传值,子组件通过 props 进行接受: 1 父组件中: 2 3 <template> 4 <div id= ...
随机推荐
- linux一个进程如何睡眠
如果我们深入 <linux/wait.h>, 你见到在 wait_queue_head_t 类型后面的数据结构是非 常简单的; 它包含一个自旋锁和一个链表. 这个链表是一个等待队列入口, ...
- jQuery 工具类函数-URL操作函数
调用名为$. param的工具函数,能使对象或数组按照key/value格式进行序列化编码,该编码后的值常用于向服务端发送URL请求,调用格式为: $. param (obj); 参数obj表示需要进 ...
- 关于react打包之后静态资源加载错误的问题
之前在打包react项目时发现一些问题,打包出来后我的一部分png图标加载不出来,开发者模式发现他们的路径中莫名其妙混入了我在react-router路由中使用<Browserrouter> ...
- JavaScript的bind方法
bind的机制 var foo = function(){} var bar = foo; console.log(foo === bar) //true /*-------------------- ...
- Java第一次创建对象速度比之后慢的原因
类的对象在第一次创建的时候,Java虚拟机(JVM)首先检查是否所要加载的类对应的Class对象是否已经加载.如果没有加载,JVM就会根据类名查找.class文件,并将其Class对象载入.一般某个类 ...
- 分布式架构基石RPC的实现原理
RPC的由来 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当网站流量很小时, ...
- IntelliJ Idea中的 Facets 与 Artifacts
在公司和家用电脑上不同版本的idea做实验发现过程中会有些不同,遇到过一些问题,也正是这些问题使得自己能更进一步了解项目构建过程中的细节,特别记录一下. 这个是[温故知新] Java web 开发 ...
- C# 对象与引用变量
从宏观的角度来看,对象是类的实例.比如: //定义一个名为Someone的类,代表这么一些人(通过指定年龄,性别,性格等基本信息)class Someone { public int age; p ...
- 【学习】调用iframe中的方法
当页面中有iframe时,想在主页面调用iframe中的方法,可以用contentWindow属性.但具体用时还有一点要注意,就是必须等页面加载完成才可以,否则会报错找不到函数. 例: 父页面: &l ...
- springboot + freemarker 实现计算器
使用RequestParam("") 接受参数 其后参数有自动类型转换的作用 @RequestParam("firstNumber") double first ...