Vue.js之组件传值

属性传值可以从父组件到子组件,也可以从子组件到父组件。

这里讲一下从父组件到子组件的传值

  还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Users.vue和Footer.vue为子组件,Users.vue中的数据有个数组,现在把数组放到父组件App.vue中

App.vue文件:

 <template>
<div id="app">
<app-header></app-header>
<users v-bind:users="users"></users>
<app-footer></app-footer>
</div>
</template>
<!--行为-->
<script>
//局部注册组件
import Users from './components/Users'
import Header from './components/Header'
import Footer from './components/Footer' export default {
name: 'App',
data(){
return {
users:[
{name:"Henry",Position:"Java工程师",show:false},
{name:"Lily",Position:"Java工程师",show:false},
{name:"Kang",Position:"Java工程师",show:false},
{name:"Henry",Position:"Java工程师",show:false},
{name:"Henry",Position:"Java工程师",show:false}
]
}
},
components:{
"users":Users,
"app-header":Header,
"app-footer":Footer
}
}
</script> <!--样式-->
<style > h1{
color: pink;
}
</style>

  这里通过与子组件关联的 <users></users> 标签传值,在标签里通过 V-bind:users=“users” 来实现,前面的users是我们起的别名,后面的“users”为data()返回值里面的users数组.

然后在子组件里接收数据,接收数据这里有两种方法。

第一种:

  在子组件Users.vue中的script里,直接通过 props:[“users”] 来获取数组,这样就可以在子组件里直接使用users数组,但是这种方法不够严谨。

 <script>
export default {
name: 'users',
props:['users']
}
</script>

第二种:
  在子组件Users.vue中的script里,通过通过 props:{...} 来获取

 <script>
export default {
name: 'users',
props:{
users:{
type:Array,
required:true
}
}
}
</script>

  在props中,可以接收多个对象,而且可以指定对象的类型,而且可以说明是不是规格的数据。

属性传值的时候可以传两种东西,一个是传具体的值,另一个是传引用,这里的引用一般只有两个东西,一个是数组,一个是对象

注意:注意传值和传引用的区别

  传值: string   number   boolean
  传引用: array  object

  传值和传引用会带来不同的效果,选择哪一种要根据项目的具体需求而定。
  例如上面的例子,传的就是一个数组,是传引用,既然是传引用,就会出现一些问题,例如在项目中多次引用数据,如果添加或者删除一个地方的数据,其他地方的数据也会出现变化,
但是传值的话,修改一个地方其他地方并不会改变

子组件像父组件传值
1.通过事件传值

  首先在子组件中注册一个事件,通过 this.$emit("titleChanged","子向父组件传值"); 第一个参数是当前注册事件的名字是什么,自己定义的一个事件,第二个参数是该事件要传的内容。
例如:
  Header.vue文件:

 <template>
<header @click="changeTitle">
<h1>{{title}}</h1>
</header>
</template> <script>
export default {
name: 'app-header',
data () {
return {
title1:"Vue.js Demo"
}
},
props:{
title:{
type:String
}
},
methods:{
changeTitle:function(){
this.$emit("titleChanged","子向父组件传值");
}
}
}
</script> <style scoped>
header{
background: pink;
padding: 10px;
}
h1{
color: #222;
text-align: center;
}
</style>

  当在header上点击,就出触发changeTitle方法,然后这个changeTitle方法会在父组件App.vue中寻找titleChanged事件,然后在父组件中实现titleChanged事件。

  App.vue文件:

 <!--模板-->
<template>
<div id="app">
<app-header @titleChanged="updateTitle($event)" :title="title"></app-header>
<users :users="users"></users>
<app-footer></app-footer>
</div>
</template> <!--行为-->
<script>
//局部注册组件
import Users from './components/Users'
import Header from './components/Header'
import Footer from './components/Footer' export default {
name: 'App',
data(){
return {
title:"这是一个title!"
}
},
methods:{
updateTitle:function (title) {
this.title = title;
}
},
components:{
"users":Users,
"app-header":Header,
"app-footer":Footer
} }
</script> <!--样式-->
<style > h1{
color: pink;
}
</style>

  在App.vue组件中与子组件关联的标签中绑定一个事件 @titleChanged="updateTitle($event)" ,事件名字就是子组件注册的事件名字,然后这个事件再实现一个方法 updateTitle($event) ,接收参数用 $event ,接下来在App.vue组件中实现 updateTitle() 方法,这里的 this.title=title 中的this.title是当前页面的title,后面的title是形参,是子组件传递过来的参数。

  这样运行程序后,在header上点击以后就替换成了从子组件中传过来的值,OK现在来分析一下工作流程:

  当我们点击header标签的时候,会触发Header.vue组件中的changeTitle方法,触发这个方法以后,方法里注册了一个事件titleChanged,并且该事件传递了一个参数,然后会在父组件App.vue中寻找titleChanged事件,然后App.vue中的这个事件实现了updateTitle方法,然后该方法用子组件传递过来的值替换了当前组件的title的值。

  这样就简单的实现了通过事件的方法从子组件向父组件传值。

Vue.js之组件传值的更多相关文章

  1. vue.js 兄弟组件传值

    另:  在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了,虽然可以使用事件监听的方式,但还是不如vuex专业.比如A组件要告 ...

  2. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  3. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  4. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  5. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  6. Vue.js之组件嵌套

    Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...

  7. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

  8. VUe.js 父组件向子组件中传值及方法

    父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...

  9. Vue.js父子组件如何传值 通俗易懂

    父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建pr ...

随机推荐

  1. python 利用numpy进行数据分析

    一.numpy.loadtxt读取数据 data=numpy.loadtxt('数据路径.txt',delimiter=',',usecols=(0,1,2,3) , dtype=float)#读取后 ...

  2. lucene 加速索引建立速度

    加速 lucene 索引建立速度 ImproveIndexingSpeed

  3. 【MyBatis学习07】动态sql

    1. 动态sql 动态sql是mybatis中的一个核心,什么是动态sql?动态sql即对sql语句进行灵活操作,通过表达式进行判断,对sql进行灵活拼接.组装.就拿上一篇博文中对用户的综合查询一例来 ...

  4. Linux禁止非WHEEL用户使用SU命令

    通常情况下,一般用户通过运行"su -"命令.输入正确的rootpassword.能够登录为root用户来对系统进行管理员级别的配置. 可是.为了更进一步加强系统的安全性,有必要建 ...

  5. SQL Server事务详解

    事务定义: 事务是单个的工作单元.如果某一事务成功,则在该事务中进行的所有数据更改均会提交,成为数据库中的永久组成部分.如果事务遇到错误且必须取消或回滚,则所有数据更改均被清除. 事务三种运行模式:  ...

  6. Atitit.wrmi web rmi框架新特性

    Atitit.wrmi web rmi框架新特性 1. V1d  新特性1 1.1. 增加了精确参数1 1.2. 增加了req参数,命名参数模式..1 1.3. 增加了globale  传递隐含参数r ...

  7. python 学习方法

    依据本人的学习经验,我总结了下面十点和大家分享: 1)学好python的第一步.就是立即到www.python.org站点上下载一个python版本号.我建议刚開始学习的人,不要下载具有IDE功能的集 ...

  8. 李洪强-HEAD 和nil和NULL

  9. UITabelViewCell自定义(zhuan)

    很多时候,我们需要自定义UITableView来满足我们的特殊要求.这时候,关于UITableView和cell的自定义和技巧太多了,就需要不断的总结和归纳.   1.添加自定义的Cell.   这个 ...

  10. 在python中配置tornado服务

    import tornado.httpserver import tornado.options import tornado.web from tornado.options import defi ...