路飞-父传子数据
父传子数据
父子组件无法直接通讯，比如父组件data里面有 msg变量，子组件并不能直接引用。
解决方案：
1）父组件模板中写子组件标签
2）父组件的数据绑定给子组件标签的自定义属性
3）在子组件内部通过props拿到自定义属性
4）使用自定义属性就可以获得父组件的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父传子</title>
</head>
<body>
<div id="app">
<!--总结：
1）父组件模板中写子组件标签
2）父组件的数据绑定给子组件标签的自定义属性
3）在子组件内部通过props拿到自定义属性
4）使用自定义属性就可以获得父组件的数据
-->
<sub-tag :a="msg"></sub-tag>
<!--注意：不要在sub-tag标签里面绑定事件，绑定事件无效且会报错。 -->
</div>
</body>
<script src="js/vue.js"></script>
<script>
let subTag = {
// 子组件通过props实例成员获取自身自定义属性
props: ['a'],
template: `
<div>
<h1>{{ a }}</h1>
</div>
`
};
new Vue({
el: '#app',
data: {
msg: '父级数据'
},
components: {
subTag,
}
})
</script>
</html>
for循环父传子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父传子案例</title>
<style>
.box {
width: 200px;
text-align: center;
border: 1px solid black;
border-radius: 10px;
overflow: hidden;
float: left;
}
.box img {
width: 100%;
}
.box p {
margin: 0;
}
.box span:hover {
cursor: pointer;
color: orange;
}
</style>
</head>
<body>
<div id="app">
<box-tag v-for="box_obj in box_data" :box_obj="box_obj"></box-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let boxTag = {
props: ['box_obj'],
template: `
<div class="box">
<img :src="box_obj.img_url" alt="">
<p>
<span @click="btnClick">点击了{{ num }}下</span>
<p>{{ box_obj.img_title }}</p>
</p>
</div>
`,
data () {
return {
num: 0
}
},
methods: {
btnClick () {
this.num += 1;
}
}
};
// 后台的数据
let back_data = [
{
img_url: 'img/001.jpg',
img_title: '野兽1'
},
{
img_url: 'img/002.jpg',
img_title: '野兽2'
},
{
img_url: 'img/003.jpg',
img_title: '野兽3'
}
];
new Vue({
el: '#app',
data: {
box_data: back_data
},
components: {
boxTag,
}
})
</script>
</html>
