vue组件中父组件向子组件传递值
2019-06-28 本文已影响0人
托小尼IM
父组件向子组件传递值主要通过在子组建中定义props数组，父组件模板中使用子组件中props内定义的名称直接赋值，或者使用v-bind:子组件props中定义的名称=父组件中定义的变量来传递值，具体直接看以下代码即可，关键地方已经做了注释，所以就不详细解释每句代码含义了。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="panel panel-default" id="app">
<div class="panel-heading">
<div class="panel-title">APP父组件</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<!--向子组件传递静态值或动态对象-->
<Com1 pass_value="我是父组件传给你的值" v-bind:pass_obj="app_user"></Com1>
</div>
<div class="col-lg-4">
<!--向子组件传递静态值或动态对象-->
<Com2 pass_value="我是父组件传给你的值" v-bind:pass_obj="app_user"></Com2>
</div>
<div class="col-lg-4">
<!--向子组件传递静态值或动态对象-->
<Gcom pass_value="我是父组件传给你的值" v-bind:pass_obj="app_user"></Gcom>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 定义一个全局子组件
Vue.component('Gcom', {
data:function () {
return {
gcom_blog:{
id:8,
title:'Gcom中的博客标题'
}
}
},
// 用来接收父组件传递过来的值
props:['pass_value', 'pass_obj'],
template:`
<div class="panel panel-danger">
<div class="panel-heading">
<div class="panel-title">Gcom全局子组件</div>
</div>
<div class="panel-body">
{{gcom_blog.id}}——{{gcom_blog.title}}
<p class="bg-danger">{{pass_value}}</p>
<blockquote>
<p>父组件传递过来的对象</p>
<footer>
姓名：{{pass_obj.name}} |
年龄：{{pass_obj.age}}</footer>
</blockquote>
</div>
</div>
`
})
//定义一个局部组件com1
let Com1={
data:function () {
return {
info:'Com1组件信息'
}
},
// 用来接收父组件传递过来的值
props:['pass_value', 'pass_obj'],
template:`
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">Com1子组件</div>
</div>
<div class="panel-body">
{{info}}
<p class="bg-primary">{{pass_value}}</p>
<blockquote>
<p>父组件传递过来的对象</p>
<footer>
姓名：{{pass_obj.name}} |
年龄：{{pass_obj.age}}</footer>
</blockquote>
</div>
</div>
`
}
//定义一个局部组件com2
let Com2={
data:function () {
return {
msg:'Com2组件信息'
}
},
// 用来接收父组件传递过来的值
props:['pass_value', 'pass_obj'],
template:`
<div class="panel panel-warning">
<div class="panel-heading">
<div class="panel-title">Com2子组件</div>
</div>
<div class="panel-body">
{{msg}}
<p class="bg-warning">{{pass_value}}</p>
<blockquote>
<p>父组件传递过来的对象</p>
<footer>
姓名：{{pass_obj.name}} |
年龄：{{pass_obj.age}}</footer>
</blockquote>
</div>
</div>
`
}
// 父组件app
new Vue({
el:'#app',
data:function () {
return {
app_user:{
name:'孙悟空',
age:529
}
}
},
// 挂载子组件、全局组件不用挂载
components:{
Com1,
Com2
}
});
</script>
</body>
</html>
image.png
页面渲染结果如上图
