props是实现父组件传递消息给子组件的,子组件不能通过这个传值给父组件
用法如下:
parent.vue(这是父组件文件)
<template>
<div class="container">
<div>
<child :msgtochild="message"></child>
</div>
</div>
</template>
<script>
import child from './components/child.vue'
export default {
name: 'app',
data () {
return {
msg: '书屋',
search:false,
message:'这是发送给子组件的消息'
}
},
components: {
child
},
directives: {
focus: {
inserted: function (el, {value}) {
if (value) {
el.focus();
}
}
}
},
methods:{
changeStatus:function(el){
this.search=!this.search;
}
},
mounted:function(){
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
});
}
}
</script>
<style scoped>
#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;
}
.bounce-enter-active { animation: bounceInRight .5s;} /* 刚加载时的动画 */
/*.bounce-leave-active { animation: bounce-out .5s;}*/
@keyframes bounceInRight {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: none;
}
}
@keyframes bounce-out { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(0); }}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
子组件要想拿到父组件传过来的值就得用props这个属性,而不能放在data里边
child.vue(这是子组件文件)
<template>
<div class="layui-container">
<a href="">{{msgtochild}}</a>
</div>
</template>
<script>
import '../assets/style.less'
export default {
name: 'app',
props:{
'msgtochild':String //这个的String是用来声明这个子组件想要父组件传过来值的类型,一般为String,Object
},
data () {
return {
msg: '书屋',
search:false,
bookList:[
{'bookimgsrc':'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3965705221,2010595691&fm=27&gp=0.jpg','bookname':'标题','dongtai':'更新动态'},
{'bookimgsrc':'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3965705221,2010595691&fm=27&gp=0.jpg','bookname':'标题','dongtai':'更新动态'},
{'bookimgsrc':'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3965705221,2010595691&fm=27&gp=0.jpg','bookname':'标题','dongtai':'更新动态'}
],
somedata:[]
}
},
methods:{
changeStatus:function(el){
this.search=!this.search;
}
},
mounted:function(){
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
});
this.$emit('childMethod');
},
created(){
console.log(this.$route.params.id);
this.$http.jsonp('https://suggest.taobao.com/sug?code=utf-8&q=数码').then(function(res){
this.somedata=res.body.result;
}, function(res){
// console.log(res)
});
}
}
</script>
<style scoped>
.list{
padding: 5px 0;
border-bottom: 1px solid #DDD;
}
.list img{
width: 100%
}
.title a{
font-size: 18px
}
</style>
这样一来父组件里边的message发生变化,子组件里边的对应的msgfromparent就会相应的改变