Vue 父子组件传值与验证props

在 Vue 中，父子组件的关系可以总结为 props向下传递，事件向上传递。父组件通过 props 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。

注意：这种方式只能由父向子传递，子组件不能更新父组件内的data

实例：

1.在父组件中定义 msg 属性

data:{
      msg:'123 -我是父组件中的数据'
    },

2.引用子组件

父组件可以在引用子组件的时候，通过属性绑定的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用。

把父组件传递过来的 msg 属性，绑定到子组件的 parentmsg 属性上。

<com1 :parentmsg="msg"></com1>
 
 

3. 在子组件定义部分，需要把父组件传递过来的 parentmsg 属性，先在props数组中定义一下（代表这个属性是由父组件传递过来的），这样，才能使用这个数据

props:['parentmsg'],
 
 

4.在子组件中使用

template:"<h1>这是子组件--{{parentmsg}}</h1>",
 
 

5.子组件中data和props的区别

子组件中的data数据，不是通过父组件传递的是子组件私有的，是可读可写的。

子组件中的所有 props中的数据，都是通过父组件传递给子组件的，是只读的。

App.vue

<template>
  <div id="app">
    <h1>{{ msg }}</h1>

    <!-- 3.在模板中使用 -->
    <v-home></v-home>
    <br>

  </div>
</template>

<script>
/*
生命周期函数/钩子：
组件挂载、组件更新、组件销毁触发的一系列方法 这些 方法叫做生命周期函数

*/
//1.引入组件
import Home from './components/Home.vue';

export default {
  name: 'app',
  data () {
    return {
      msg: '我是一个根组件'
    }
  },
  //2.挂载组件
  components:{//前面的组件名称不能和html一样
    'v-home':Home,
  },
  mounted(){
    console.log("我是一个生命周期函数");
  }
}
</script>

<style lang="scss">

</style>

在父组件中，引入子组件，并传入子组件内需要的值
Home.vue

<template>
   <div id="home">
      <h3>首页组件</h3>
      <!-- 完整语法 v-bind的缩写 <a v-bind:href="url"></a> -->
      <!-- 分别传属性 方法 实例-->
      <v-header :title="title" :homemsg="msg" :run="run" :home="this"></v-header>
   </div>
</template>

<script>
/*
    1.父组件调用子组件的时候 绑定动态属性
        <v-header :title="title"></v-header>

    2、在子组件里面通过 props接收父组件传过来的数据
*/

import Header from './Header.vue';

export default {
   data() {
       return {
         msg:'我是一个home组件',
         title:'首页传过来的'
       }
   },
  components: {
    'v-header':Header
  },
  methods:{
    run(data){
      alert('我是home组件的run方法'+data);
    }
  }
}
</script>

<style scoped lang="scss">
</style>

定义一个子组件，在组件中注册props
Header.vue

<template>
   <div class="">

      <h1>子组件Header：</h1>
      <h2>我是头部组件---{{title}}---{{homemsg}}</h2>

      <button @click="run('和子组件的123')">执行父组件的方法</button>

      <br>
      <button @click="getParent()">获取父组件的数据和方法</button>

      <br>

   </div>
</template>

<script>
export default {
   name: '',
   data() {
       return {
         msg:'子组件msg'
       }
   },
   methods:{
      getParent(){
        //alert(this.title);
        //this.home是下面指首页的home
        //alert(this.home.title);
        //执行父组件的run()方法
        this.home.run();
      }
   },
   props:['title','homemsg','run','home']
}
</script>

<style scoped lang="scss">
</style>

运行截图：