Vue:组件父子通信
示例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<alert msg="Yooooooooo Wooooooooo"></alert>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
Vue.component('alert',{
template:'<button @click="on_click()">弹弹弹</button>',
props:['msg'], //保存自定义特征
methods:{
on_click:function () {
alert(this.msg)
}
}
});
new Vue({
el:'#app'
})
</script>
</body>
</html>
示例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<user username="xiaobai"></user>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
Vue.component('user',{
template:'<a :href="\'user\' + username">@{{username}}</a>',
props:['username'],
methods:{
}
});
new Vue({
el:"#app"
})
</script>
</body>
</html>
