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= ...
随机推荐
- 学习vue就是那么简单，一个简单的案例
vue是前端兴起的一个javascript库,相信大家都使用过jQuery,虽然vue和jQuery没有可比性,但从熟悉的角度去理解新的东西或许会容易接受一些,有时候由于思想和模式的转变会带来阵痛,但 ...
- VS2017 OpenCV3.4.2 通过Release的版本 源码编译成 x86
官方release的OpenCV3..2版本只有64bit,由于项目需要,现在把它重新编译成x86的库. 下载源码: github官方仓库 https://github.com/opencv/open ...
- 【t091】油滴扩展
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 在一个长方形框子里,最多有N(0≤N≤6)个相异的点.在其中任何一个点上放一个很小的油滴,那么这个油滴 ...
- 机器学习——SVM
整理自: https://blog.csdn.net/woaidapaopao/article/details/77806273?locationnum=9&fps=1 带核的SVM为什么能分 ...
- CF1209
CF1209 A B 水题不管 C 因为要求最终整个序列是要单调的 所以我们就考虑枚举断点$x$ 之后把$<x$的数放到第一个集合 把$> x$的数放到第二个集合 至于$=x$的数 他能放 ...
- git常用常用操作指令
GIT操作 1:git init 初始化空的仓库,会在当前文件夹生成一个隐藏.git的文件夹,相当于一个仓库. 2:提交代码的流程:工作代码区-->暂存区 -->主仓库 -->服务器 ...
- koa2--04.ejs模板引擎
首先在项目文件下使用cmd,输入:npm install --save koa-views ejs,将koa-views中间件和ejs模板引擎安装到文件中,并自动写入依赖 接在在index.js文件中 ...
- Oracle生成批量清空表数据脚本
select 'DELETE FROM ' || a.table_name || '; --' || a.comments from user_tab_comments a where a.table ...
- BZOJ 3166
BZOJ3196: Tyvj 1730 二逼平衡树 传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=3196 题意: 1.查询k在区间内的排名 ...
- Stylized Image Caption论文笔记
Neural Storyteller (Krios et al. 2015) : NST breaks down the task into two steps, which first genera ...