vue中父级组件向子组件传递参数(通信)

原创 2018年04月17日 17:54:28

在父级组件中引入子组件,并像如下定义:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--
    	在调用组件的时候,使用v-bind将logo的值绑定为 APP.vue中定义的变量 logoMsg
    	然后就能将App.vue中的logoMsg的值传给header.vue 了
    -->
    <headerDiv :logo="logoMsg"></headerDiv>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
import headerDiv from './components/header.vue'
export default {
  name: 'app',
  data(){
  	return{
  		msg:'hellow Vue',
  		logoMsg:'WiseWrong'
  	}
  },
  components:{headerDiv},
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子组件中接收参数信息

<template>
	<div>
		<!--
			logo 是在data中(父组件)定义的变量
			如果需要从父组件中获取logo的值,就需要使用props['logo'], 如30行
			在props中添加了元素以后,就不需要在data中(子组件)中再添加变量了
		-->
		<div id='logo'>{{logo}}(我是父组件传递过来的值)</div>
		<ul class="nav">
			<li v-for="nav in navs">{{nav.li}}</li>
		</ul>		
	</div>

</template>
<script>
	export default{
		name:'headerDiv',
		data(){
			return{
			   navs:[
				{li:'主页'},
				{li:'日志'},
				{li:'说说'},
				{li:'主页'},
				{li:'相册'}
			   ]
			}
		},
		props:['logo']
	}
	
</script>
<style scoped>
	.nav li{list-style: none;} 
</style>

附加,vue官网上props接收参数的两种方式:

// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// 对象语法,提供校验
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})
父级组件向子组件传递参数,是组件通信中很重要的一部分。本文结。


前端框架Vue(8)——子父组件的传参通信

父子间的通信传值是 vue 中的一个重要的内容和掌握点。  *vue2.0 推荐使用 vuex,全局进行状态管理。(后面再讲)  首先讲一下遇到的 需求背景: 解释一下:   组件之间的关系: ...
  • DOCALLEN
  • DOCALLEN
  • 2017-04-14 15:26:40
  • 14210

vue 子组件向父组件传递参数

vue自定义事件每个vue实例都实现了事件接口,即$on(),$emit() 都是vue实例的方法,所以在vue选项上需要this来指定。 $on() 事件监听-作用与父组件作用域子组件标签上 $e...
  • evendetail
  • evendetail
  • 2017-11-24 11:46:20
  • 138

vue-子组件向父组件传值

子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 Do you like me? {{childWords}} methods: { ...
  • yu88288356
  • yu88288356
  • 2017-02-06 17:22:38
  • 28478

vue.js - 子向父组件传参(下)

1、自定义事件方法一: Vue实例实现了一个自定义事件接口,用于在组件树中通信。这个事件系统独立于原生DOM事件,用法也不同。每个Vue实例都是一个事件触发器: 使用$on()监听事件 使用$emi...
  • zjsfdx
  • zjsfdx
  • 2017-10-29 09:53:29
  • 210

vue 父组件与子组件相互通信

父组件传值到子组件注册一个子组件,需要向子组件传值,给渲染的子组件自定义标签属性,绑定传输数据msg是绑定的自定义属性,类似我们原生html 给标签自定义属性一样,Widget是传输变量, 子组件接...
  • github_37847992
  • github_37847992
  • 2017-10-06 21:50:58
  • 798

vue.js学习笔记(六)--利用v-model实现父子组件间的双向通信

作者:张飞翔 博客:https://fisher-zh.github.io/ 在Vue中,我们可以使用prop属性来进行父子组件间的通信,在之前的文章Vue踩坑之路–父子组件通信总结中有介绍过。...
  • sir1241
  • sir1241
  • 2017-08-05 15:47:03
  • 1209

Vuejs——(10)组件——父子组件通信

本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 本文...
  • qq20004604
  • qq20004604
  • 2016-09-05 17:08:44
  • 11661

vue2中(路由/父子/组件/事件)数据通信方法总结

vue2中(路由/父子/组件/事件)数据通信方法总结
  • lemon_zhao
  • lemon_zhao
  • 2017-08-03 10:27:45
  • 3581

vue父组件与子组件间如何进行数据传递

vue父组件和子组件间怎么进行数据传递 父组件传递数据给子组件(可以通过props属性来实现): 由于组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让...
  • qilanbei
  • qilanbei
  • 2017-09-22 11:51:29
  • 2863

vue父子组件的数据传递

1.父组件向子组件传递数据 模板aaa=>{{msg1}} //msg1写在这里是可以的,因为这是父组件内部 //{{msg1}} //这种写法是不可...
  • luckylqh
  • luckylqh
  • 2016-10-18 22:57:57
  • 20652
收藏助手
不良信息举报
您举报文章:vue中父级组件向子组件传递参数(通信)
举报原因:
原因补充:

(最多只允许输入30个字)