vue 安装包：要有node-sass这个包 就先下载这个包 npm install node-sass-D 在下载其他的node包
子组件像父组件传值
<div id="app">
<child-div @a='handleTotal'></child-div>
{{total}}
</div>
<script>
//定义子组件
Vue.component('child-div',{
data(){
return{
counter:0,
}
},
template:'<span @click="handleCounter">点我加一{{counter}}</span>',
methods:{
//点击时候子组件加1，父组件加2
handleCounter(){
this.counter ++
console.log('###########');
this.$emit('a',2)
}
}
})
new Vue({
el:'#app',
data:{
total:0,
},
methods:{
handleTotal(e){
console.log('@@@@@@@@@@@');
console.log(e);
this.total+=e
}
}
})
</script>
组件之间相互传值
<div id="app">
<data-a></data-a>
<data-b></data-b>
<data-c></data-c>
</div>
<template id="a"><div>
<button @click='atoC'>A将数据传递给C</button>
我的名字是：{{name}}</div>
</template>
<template id="b"><div>
<button @click='btoC'>B将数据传递给C</button>
我的年龄是：{{age}}</div>
</template>
<template id="c"><div>
<span>我接受到的参数是</span>
{{name}}========={{age}}</div>
</template>
<script>
var Event = new Vue();
var a = Vue.component(
'data-a', {
template: '#a',
data() {
return {
name: 'Tom'
}
},
methods: {
atoC() {
// console.log('aaaaaaaaaaaaaaaaaaaa');
Event.$emit('data-a', this.name)
// console.log('atoc success');
}
}
}
)
var b = Vue.component(
'data-b', {
template: '#b',
data() {
return {
age: 20
}
},
methods: {
btoC() {
Event.$emit('data-b', this.age)
}
}
}
)
var c = Vue.component(
'data-c', {
template: '#c',
data() {
return {
name: 'name',
age: 'age'
}
},
mounted() {
// console.log('@@@@@@@@@@@@@@');
Event.$on(
'data-a', name => {
this.name = name;//箭头函数不产生新的this,这里如果不用箭头函数，this指代Event
}
)
Event.$on(
'data-b', age => {
this.age = age;
}
)
}
}
)
new Vue({
el:'#app',
components:{
'data-a':a,
'data-b':b,
'data-c':c
}
})
