组件间的使用

在APP里面引入这些子组件

• 1.引入组件

  
  组件
  结果

一，父组件向子组件传值

• 在子组件里使用props选项

父组件中使用标签属性的形式传递数据给子组件，子组件使用props选项来接收父组件传过来的数据。

props的形式是单向的，父级对应数据的更新会下流到子组件中，而子级的更新不会回流到父级。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

<template>
 <h2>{{num}}</h2>
<Sun :a="num"></Sun>//在子组件中绑定属性
</template>

<script>
import Sun from '@/components/Sun.vue'
export default {
  name: "App",
  components: {
    Sun
  },
  data(){
    return{
      num:0
    }
  }
};
</script>

<template>
  <div>{{a}}</div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props:["a"]//接收父组件传过来的值
}
</script>

当子组件里面的数据和父组件传过来的数据变量重名的时候，子组件用自己的数据

• 当然我们用props接收时一般都有对象的形式来接收.

props:{
    a:Number,//接收数据且验证
  }

• 即允许父组件传过来的值是数字类型又是字符串类型写法

props:{
    a:[Number,String]//接收数据且验证
  }

• 必须传值的写法

 // 必填的字符串
    a: {
        type: String,
        required: true
    },

• 带有默认值的写法

 a: {
        type: Number,
        default: 100
    },