目录
注意:若在子组件中同时定义title则会发生冲突
(使用了components里面定义的组件的页面,用了element.vue)
<template>
<elementname :title = "title"></elementname>
</template>
<script>
import element from '../../components/element.vue'
export default {
data() {
return {
title: "father!"
}
},
components: {
elementname: element
},
methods: {
}
}
</script>
<style>
</style><template>
<view>
<view>父组件传递的数据:{{title}}</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
props:['title'],
methods: {
}
}
</script>
<style>
</style>
<template>
<view>
<button @click="giveFather">给父组件传值</button>
</view>
</template>
<script>
export default {
data() {
return {
title:"son!"
}
},
methods: {
giveFather(){
console.log("给父组件传值")
this.$emit('myEven',this.title)
}
}
}
</script>
<style>
</style><template>
<view>
<view>子组件传递的数据:{{title}}</view>
<elementname @myEven="gitTitle"></elementname>
</view>
</template>
<script>
import element from '../../components/element.vue'
export default {
data() {
return {
title:''
}
},
components: {
elementname: element
},
methods: {
gitTitle(title) {
console.log(title)
this.title = title
}
}
}
</script>
<style>
</style>
<template>
<view>
<view>a组件</view>
<button size="mini" @click="addNum">修改b组件的数据</button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods:{
addNum(){
uni.$emit('updateNum',10)
}
}
}
</script>
<style>
</style><template>
<view>
<view>b组件</view>
<view>这是b组件的数据:{{num}}</view>
</view>
</template>
<script>
export default {
data() {
return {
num: 0
};
},
created() {
uni.$on('updateNum',(num)=>{
this.num+=num
})
}
}
</script>
<style>
</style><template>
<view>
<text-a></text-a>
<text-b></text-b>
</view>
</template>
<script>
import textA from '../../components/a.vue'
import textB from '../../components/b.vue'
export default {
data() {
return {
}
},
components: {
"text-a": textA,
"text-b": textB
},
methods: {
}
}
</script>
<style>
</style>