您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
vue项目第五天
发布时间：2020-05-11 16:34:15编辑：雪饮阅读（）
子组件接收数据处理展示
子组件可以通过接收父组件的属性，并在computed中用新的结果做为return的展示添油加醋。
首先初始化一个简易的webpack
C:\Users\Administrator\WebstormProjects\untitled>vue init webpack-simple test01
? Project name y
? Project description y
? Author
? License MIT
? Use sass? No
vue-cli · Generated "test01".
To get started:
cd test01
npm install
npm run dev
按照提示完成所有操作后建立子组件Son并在main.js中导入
import Vue from 'vue'
import App from './App.vue'
import Son from "./Son";
new Vue({
el: '#app',
render: h => h(App)
})
app.vue中调用并传值
<template>
<div id="app">
<div>父组件name:{{name}}</div>
<Son :name="name"></Son>
</div>
</template>
<script>
import Son from "./Son";
export default {
name: 'app',
components: {Son},
data () {
return {
name: '雪饮'
}
}
}
</script>
我们看到这里给son组件传的name值是“雪饮”，那么son组件如
<template>
<div>my name is {{name}}</div>
</template>
<script>
export default {
props:['name'],
name: "Son",
computed:{
name(){
return '杜敏捷';
}
}
}
</script>
<style scoped>
</style>
虽然son组件模板中展示的是name属性，但是在son组件中computed中与属性名同名的方法name方法重新return后则结果被重新改变。
基于事件传递方式实现子组件修改父组件属性
首先父组件要提供一个可以修改本组件属性的method方法并将该方法通过props的方式给子组件传递，如
<template>
<div id="app">
<div>父组件name:{{name}}</div>
<Son :name="name" :changeHandler="changeName"></Son>
</div>
</template>
<script>
import Son from "./Son";
export default {
name: 'app',
components: {Son},
data () {
return {
name: '雪饮'
}
},
methods:{
changeName(data){
this.name = data;
}
}
}
</script>
那么子组件就必须也声明这样的props项来接收并在子组件修改属性时向父组件提供的这个method中传递值即可。
<template>
<div>
<div>my name is {{name}}</div>
<div><button @click="changeFather">改变父组件属性</button></div>
</div>
</template>
<script>
export default {
props:['name','changeHandler'],
name: "Son",
methods:{
changeFather(){
this.changeHandler('杜敏捷+雪饮');
}
},
computed:{
name(){
return '杜敏捷';
}
}
}
</script>
<style scoped>
</style>
EventBus方式修改父组件属性
EventBus原理是父子组件都引入EventBus，然后父组件通过EventBus监听一个事件，子组件通过EventBus触发一个事件，当父组件接收到子组件的触发后就可以对父组件自己进行操作了。
首先在main.js同级目录建立EventBus.js
import Vue from 'vue';
let Bus = new Vue();
export default Bus;
则app.vue（父组件）如
<template>
<div id="app">
<div>父组件name:{{name}}</div>
<Son :name="name"></Son>
</div>
</template>
<script>
import Son from "./Son";
import Bus from './EventBus.js';
export default {
name: 'app',
components: {Son},
data () {
return {
name: '雪饮'
}
},
created() {
// 父先监听
Bus.$on('changeName',(data)=> {
// 这里的this是Bus,所以要用箭头函数
console.log(this);
this.name = data;
});
}
}
</script>
则子组件son如
<template>
<div>
<div>my name is {{name}}</div>
<div><button @click="changeFather">改变父组件属性</button></div>
</div>
</template>
<script>
import Bus from './EventBus.js';
export default {
props:['name'],
name: "Son",
methods:{
changeFather(){
let name='杜敏捷+雪饮';
Bus.$emit('changeName',name);
}
},
computed:{
name(){
return '杜敏捷';
}
}
}
</script>
最简单的修改父组件属性方式
我们只需要在父组件调用子组件时用v-bind绑定属性的sync，如
<template>
<div id="app">
<div>父组件name:{{name}}</div>
<Son v-bind:name.sync="name"></Son>
</div>
</template>
<script>
import Son from "./Son";
export default {
name: 'app',
components: {Son},
data () {
return {
name: '雪饮'
}
}
}
</script>
然后子组件使用$emit来响应上面所指定的sync
<template>
<div>
<div>my name is {{name}}</div>
<div><button @click="changeFather">改变父组件属性</button></div>
</div>
</template>
<script>
export default {
props:['name'],
name: "Son",
methods:{
changeFather(){
let name='杜敏捷+雪饮';
this.$emit('update:name',name);
}
},
}
</script>
关键字词：vue,computed,事件传递,props,EventBus,on,emit,v-bind,sync,update