vue中父级组件向子组件传递参数(通信)
在父级组件中引入子组件,并像如下定义:
<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 } } } })父级组件向子组件传递参数,是组件通信中很重要的一部分。本文结。