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= ...
随机推荐
- 在小程序内点击按钮分享H5网页给好友或者朋友圈
在小程序内点击按钮分享H5网页给好友或者朋友圈 首先需要建立h5容器文件夹 页面.wxml <navigator url="/pages/report-await/fouryearh5 ...
- 两种方法，轻松上手ConfigMap！
属性配置文件在任何应用程序中都非常重要.它们不仅可以让应用程序具备灵活性,还能够根据文件中配置的值产生不同的功能.实际上,在staging.开发.测试.UAT或生产环境中,我们都使用属性配置文件来驱动 ...
- 【算法随记七】巧用SIMD指令实现急速的字节流按位反转算法。
字节按位反转算法,在有些算法加密或者一些特殊的场合有着较为重要的应用,其速度也是一个非常关键的应用,比如一个byte变量a = 3,其二进制表示为00000011,进行按位反转后的结果即为110000 ...
- 基于 HTML5 + WebGL 的无人机 3D 可视化系统
前言 近年来,无人机的发展越发迅速,既可民用于航拍,又可军用于侦察,涉及行业广泛,也被称为“会飞的照相机”.但作为军事使用,无人机的各项性能要求更加严格.重要.本系统则是通过 Hightopo 的 ...
- DOCKER学习_007:Docker的套接字介绍
根据https://www.cnblogs.com/zyxnhr/p/11825331.html这个文章,已经可以正常安装一个docker服务 查看Docker状态 [root@docker-serv ...
- java连接elasticsearch：查询、添加数据
导入jar包 <!-- https://mvnrepository.com/artifact/org.elasticsearch.client/transport --> <depe ...
- AndroidStudio插件大全
Android-Studio-Plugins 原文地址:https://github.com/itgoyo/Android-Studio-Plugins 欢迎star~~~ Android-Studi ...
- Prometheus + Grafana 部署说明之「安装」
说明 在前面的Prometheus学习系列文章里,大致介绍说明了Prometheus和Grafana的一些使用,现在开始介绍如何从头开始部署Prometheus+Grafana,来监控各个相关的指标数 ...
- spring之第一个spring程序
spring具体描述: 轻量级 IOC:依赖注入 AOP:面向切片编程 容器:spring是一个容器,包含并且管理应用的生命周期 框架 一站式 一.搭建spring开发环境 在eclipse中新建一个 ...
- 小白学 Python 爬虫（33）：爬虫框架 Scrapy 入门基础（一）
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...