怎么传值？
- 1.利用bus,进行vm.$ emit() vm.$on()
- 2.使用mounted在数值渲染前，进行数值修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件中的数值传递bus</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<child content="Dell"></child>
<child content="apple"></child>
</div>
<script>
Vue.prototype.bus = new Vue(); //创建全局实例，挂在bus属性
Vue.component('child',{
data: function(){
return {
selfContent: this.content
}
},
props: {
content: String
},
template: '<div @click="headleClick">{{selfContent}}</div>',
methods: {
headleClick: function(){
this.bus.$emit('change',this.content) //传递change 参数值
}
},
mounted: function(){ //mounted是渲染数据之前的步骤
var this_ = this;
this.bus.$on('change',function(msg){ //触发change事件
this_.selfContent = msg
})
}
});
var vm = new Vue({
el: '#app'
});
</script>
</body>
</html>