vue 学习心得--父组件动态修改组件的数据实现

该功能的应用场景:
1.父组件从后台获取道不同的数据,触发子组件的数据更新
2.父组件的视图更新触发子组件动态的获取后台数据,从而实现子组件的数据更新.

实现过程:
1.既然是父传子,那么定然会用到props属性
2.在父组件中为子组件绑定自定义属性并赋值(该属性用驼峰命名法)
3.在子组件中使用props 去接受父组件传来的值,同时使用watch属性去监听该变量,然后将watch属性中的第一个参数赋值给子组件.(实现视图的动态更新);

代码:
父组件:

<div class="hello">
    <select class="selected" @change="changeItems($event)">
      <option v-for="(items,index) in datalist" :key="index" :value="items.original_title">{{items.original_title}}</option>
    </select>
    <mycomponent :value="currentItems"></mycomponent>
  </div>

js 部分

data () {
    return {
      datalist:{},
      currentItems:"西红柿首富"

    }
  },


  created(){
    var url =this.HOST+'/movie/in_theaters' //豆瓣电影的接口,需要跨域
    axios.get(url)
    .then(res=>{
      this.datalist = res.data.subjects
      console.log(this.datalist)
    })
    .catch(err=>{console.log(err+"请求失败")})
  },
  methods:{
    changeItems($event){
      this.currentItems =event.target.value;
      console.log(event.target.value)
    }
  },
  components:{
      mycomponent,//子组件
  }
}

子组件:

<template>
  <div class ="bigNav">
   <p>{{val}}</p>
  </div>
</template>

<script>
export default {
    name:"mycomponent",
  data () {
    return {
        val:"西红柿首富"
    };
  },
  props:["value"],

  components: {
  },
  watch:{
      value(newdata,olddata){
        if(newdata){
          this.val =newdata;
        }
      }
    }
  }