10.外→内通信

在标签设置属性，能使其产生一些交互效果

<div id="test">
  <alert msg="not hot"></alert><br>
  <alerts msg="hot"></alerts><br>
    <name user="vfor"></name>
</div>

Vue.component('alert',{
    template:'<button v-on:click="alerter">{{msg}}</button>',
    props:["msg"],
    methods:{
        alerter:function () {
            alert(this.msg)
        }
    }
});
Vue.component('alerts',{
    template:'<button v-on:click="alerter">{{msg}}</button>',
    props:["msg"],
    methods:{
        alerter:function () {
            alert(this.msg)
        }
    }
});
Vue.component('name',{
    template:'<a v-bind:href="\'../\'+user+\'.html\'">{{user}}</a>',//第二个单引号应该要和第三个匹配，但是这么写会和第一个匹配，所以转义一下；尝试能否访问之前写的vfor.html，结果可以
    props:["user"],
})
new Vue({
    el:'#test',
})

页面：

点击 not hot 按钮：

点击hot按钮

点击 vfor链接：