前端面试题三(VUE篇)

2020-01-07 / 652

26.vue的双向数据绑定原理?

实现mvvm的双向绑定,是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

 

27.vue组件通信?

①父组件向子组件传值 --Props传递数据

 

在父组件中使用儿子组件

template>
  div>
    父组件:{{money}}
    
  < /div>
< /template>
script>
  import Son1 from ''./Son1";
  export default{
    components:{
      Son1
    },
    data(){
      return { money: 100};
    }
  };
< /script>

子组件接受数据

props:{
  value:{
    type:Number,
    default:1
  }
}

如果是数组

props:{
  value:{
    type:Array,
    default: ()=>[]
  }
}

②子组件通信父组件 $emit使用

子组件触发父组件方法,通过回调的方式将修改的内容传递给父组件

父组件

template>
  div>
    父组件:{{money}}
    
  < /div>
< /template>

script>
  import Son1 from ''./Son1";
  export default{
    methods:{
     change(data){
       this.money = data
      } 
    },
    components:{
      Son1
    },
    data(){
      return { money: 100};
    }
  };
< /script>​
     

子组件触发绑定自己身上的方法

template>
  div>
    子组件1:{{money}}
    修改父组件的值
  < /div>
< /template>

script>
  export default{
    props:{
     money:{
       type:Number
     }
    }
  };
< /script>

③ $parent、$children(多层级传递)

Grandson1 :value="value">< /Grandson1>
template>
  div>
    孙子1:{{value}}
    <---调用父组件的input事件-->
    button @click="$parent.$emit('input',200)">更改<Son1>
  < /div>
< /template>

script>
  export default{
    props:{
     value:{
       type:Number
     }
    }
  };
< /script>

④$attrs、 $listeners:

$attrs批量向下传入属性

Son2 name="小明" age="18">< /Son2>
<--可以在son2组件中使用$attrs,可以将属性继续向下传递-->
div>
  儿子2:{{  $attrs.name }}
  Grandson2  v-bind="$attrs">< /Grandson2>
< /div>
tempalte>
  div>孙子:{{$attrs}}< /div>
< /template>

$listeners批量向下传入方法

Son2 name="小明" age="18" @click=“()=>{this.money  =500}”>< /Son2>
<--可以在son2组件中使用$attrs,可以将属性继续向下传递-->
Grandson2  v-bind="$attrs" v-on="$listeners">< /Grandson2>
button @click="$listeners.click()">更改

⑤Provide&Inject

Provide 在父级中注入数据

provide(){
  return {parentMsg:'父亲'};
}

Inject

在任意子组件中可以注入父级数据

inject:['parentMsg']//会将数据挂载在当前实例上

⑥ref使用

获取组件实例


mounted(){
  console.log(this.$refs.grand2.name);
}

⑦EventBus:用于跨组件通知

Vue.prototype.$bus = new Vue();
Son2组件和Grandson1互相通信
mounted() {
  //父亲组件注册
  this.$bus.$on('my',data=>{
    console.log(data)
  })
}

mounted(){
  //侄子组件调用
  this.$nextTick(()=>{
    this.$bus.$emit('my',"我是小红”);
  })
}