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= ...
随机推荐
- ESB总线的核心架构
根据近期对开源ESB产品的研究,已经对Oracle和Tibco的ESB总线产品的实施经验积累,对ESB总线的核心产品架构有了进一步的清晰认识,将ESB的核心架构整理为上图,上图中看到的内容也是做为一款 ...
- 如何在centos 7.4 上安装 python 3.6
yum -y install https://centos7.iuscommunity.org/ius-release.rpmyum -y install python36uyum -y instal ...
- 【30.43%】【codeforces 746C】Tram
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- C# 判断系统版本
本文告诉大家如何判断系统是 win7 还是 xp 系统 使用下面代码可以判断 private static readonly Version _osVersion = Environment.OSVe ...
- vue2.x+elelmentUI@3.5 表格
<template> <section> <el-row> <el-col :span="16"> <!--表单--> ...
- jquery核心基础
jquery对对象的操作: 检查对象类型: 老式的javascript使用typeOf()操作符,但他是不符合逻辑的,在某些情况下,typeOf()返回的不是一个正确的值,或者返回一个出乎意料的值 ...
- 2019-8-31-dotnet-Framework-源代码-·-Ink
title author date CreateTime categories dotnet Framework 源代码 · Ink lindexi 2019-08-31 16:55:58 +0800 ...
- Javascript中那些你不知道的事之-- false、0、null、undefined和空字符串
话不多说直接进入主题:(如果有写的不对的地方欢迎指正) 我们先来看看他们的类型分别是什么: typeof类型检测结果 结论:false是布尔类型对象,0是数字类型对象,null是object对象,un ...
- HDU - 1005 Number Sequence （矩阵快速幂）
A number sequence is defined as follows: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * f(n - 2)) mo ...
- 利用Aspose.cells 将查询出的数据导出为excel，并在浏览器中下载。
正题前的唠叨 本人是才出来工作不久的小白菜一颗,技术很一般,总是会有遇到一些很简单的问题却不知道怎么做,这些问题可能是之前解决过的.发现这个问题,想着提升一下自己的技术水平,将一些学的新的‘好’东西记 ...