父子组件之间的作用域时独立的,因此想要调用数据就得使用一定手段进行数值传递
1.在父子间中调用子组件时,绑定父组件中的数据 例如::father_name='name'
2.在子组件props中申明要获取数据的名字 例如: props:['father_name']
3在子组件中使用接收到的数据 例如{{ father_name}}
<!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>子组件接收父组件中的数据</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="test">
<my-vue1></my-vue1>
</div>
<template id="vue1">
<div>
<p>这是父组件</p>
<p>姓名是:{{name}} 地址:{{address}} 性别:{{sex}}</p>
<input type="button" value="接收数据" @click="">
<my-vue2 :fa_name='name' :fa_address='address' :fa_sex='sex'></my-vue2> <!-- 第一变量传值 -->
</div>
</template>
<template id="vue2">
<div>
<p>这是子组件</p>
<p>姓名是:{{name}} 地址:{{address}} 性别:{{sex}}</p>
<p>父组件的数据 {{fa_name}} {{fa_address}} {{fa_sex}}</p> <!-- 直接引用传递好的数据 -->
</div>
</template>
<script>
new Vue({
el:"#test",
components:{
'my-vue1':{
template:'#vue1',
data() {
return {
name:'张三',
address:'上海',
sex:'男'
}
},
components:{
'my-vue2':{
template:'#vue2',
data() {
return {
name:'李四',
address:'北京',
sex:'女'
}
},
props:['fa_name','fa_address','fa_sex'] //在props中设置属性
}
}
}
}
})
</script>
</body>
</html>