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初始化和关停
如已提到的, 模块初始化函数注册模块提供的任何功能. 这些功能, 我们指的是新功能, 可以由应用程序存取的或者一整个驱动或者一个新软件抽象. 实际的初始化函数定义常常 如: static int ...
- CCPC 2018 吉林 H "LOVERS" （线段树）
---恢复内容开始--- 传送门 参考资料: [1]:https://blog.csdn.net/mmk27_word/article/details/89788448 题目描述: The Fool ...
- P1012 鸡兔同笼问题
题目描述 笼子里有鸡和兔若干,一直它们共有头 \(n\) 个,有脚 \(m\) 只,问笼中的鸡和兔共有多少只? 输入格式 输入包含两个整数 \(n,m(1 \le n \le 100, 2n \le ...
- H3C STP的作用
- C# Thread.Join();Thread.Abort();
Join() 等待当前线程运行完成后,才继续执行主线程后续代码: Abort() 结束当前线程,继续执行主线程后续代码: Thread.Join(); static void Main(string[ ...
- CF1045G AI robots
CF1045G AI robots 题目大意就不说了 这道题可以用CDQ分治做 但是,如何选择CDQ分治的维度一直是CDQ分治的难点所在 这道题我们有三种选择 1.让智商高的数智商低的 2.让看的近的 ...
- Weblogic/WAS之Full GC监控与计算
在网上看到关于内存回收机制,同大家一起分析探讨.堆内存划分为Eden.Survivor 和 Tenured/Old 空间,如下图所示: Minor GC 会清理年轻代的内存,Major GC 是清理老 ...
- vue-cli 3.0 eslint
1.关闭eslint module.exports = { configureWebpack: { devtool: 'source-map' }, lintOnSave: false } 2.修改e ...
- h5 页面 实现单选题，多选题功能。
效果图: 项目要求: 1:实现单选题和多选题区分 (这个根据后端传来的数据判断 ) 2 单选选中效果 和 多选选中效果(利用input 和label ) 3.答题成功与失败 分单选和多选的情况 ...
- Spring Boot + Docker + K8S 简单示例
前言 最近看了看k8s,感觉用这个管理docker确实比自己写一坨脚本进步太多了,简直不是一个次原的东西. 看着k8s的官方文档随手写了个小Demo,一个基于k8s的spring boot服务. 代码 ...