vue 2.0中的v-bind到底如何使用？

Question

贴上代码：
父组件中的代码：

<template>
   <div class="app-main">
       <AppBanner/>
       <AppMovieBox :info='url'  v-for="(url,i) in urls" :key='i'></AppMovieBox>
    
   </div>
</template>
<script>
import AppMovieBox from './AppMovieBox'
import AppBanner from './AppBanner'
export default {
    name:'app-main',
    components:{AppBanner,AppMovieBox},
    
    data(){
        return {
            urls:[
                {title:'正在热映',url:'/mz/v4/api/film/now-playing?__t='+Date.now()+'&page=1&count=5'},
                 {title:'即将上映',url:'/mz/v4/api/film/coming-soon?__t='+Date.now()+'&page=1&count=3'},
            ]
        }
    }
}
</script>
<style>
    .app-main{
        background-color: #ebebeb;
    }
</style>

想知道:info='url'到底是个什么东西？我知道url是获取数据的地址，那么info是什么？是随便定义的吗？我知道v-bind是什么意思，就是可以动态的获取数据，但是info是什么？

顺便贴上子组件的代码:

<template>
   <div class="app-moviebox">
       <AppMovieItem :film='film' v-for="film in films" :key="film.id"></AppMovieItem>
       <div class="more-button">更多热映电影</div>
   </div>
</template>
<script>
import AppMovieItem from './AppMovieItem'
import axios from 'axios'
export default {
    props:['info'],
    name:'app-moviebox',
    components:{
           AppMovieItem 
    },
    data:function(){
        return {
            films:[]
        }
    },
    methods:{
        getfilms(){
            let that = this;
            axios.get(this.info.url).then(res=>{
                that.films = res.data.data.films
            })
        }
    },
    created(){
        this.getfilms()
    }
}
</script>
<style lang='scss'>

</style>

求解，思考了一天也不知道info到底是什么！

Answer 1

info是父组件传给子组件AppMovieBox的自定义的变量，通过v-bind:info="url"传给子组件，子组件中通过props:['info']来接收。
父组件传的值不叫info也可以，比如test，msg，info1，whatever，都是自定义的，想叫什么叫什么，子组件通过props来接收即可

Answer 2

info应该是组件AppMovieBox中定义的某个属性，你应该到这个组件中去查看他表示的意思。

Answer 3

:info 是 v-bind:info 的简写，参看：https://cn.vuejs.org/v2/guide...。

现在明白了么？

Answer 4

: 是v-bind：的语法糖。