Vue | Props 用法

Props一般称之为外部数据，也叫属性

它是Vue.js中可以将数据从父组件传递到子组件的其中一个方法

props的类型可以是

props: { 
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise
  }

1. 在父组件中使用props 定义 msg 数据时
直接写成  msg="我是message"  那么 msg 传入的只是一个字符串
2. 想要动态传入数据必须写成  :msg="我是message"   就是加上":"冒号，主要用于修改或赋值 msg 数据



按照第一种方法传入数据（静态数据），必须在子组件用props声明msg的数据类型
子组件
<template>
  <div>{{msg}}</div>
</template>
<script>
export default {
  props: {
    msg: String
  }
}
</script>

父组件App.vue
<template>
  <Demo1 msg="这只是一句话"></Demo1>
</template>

<script>
import Demo1 from './components/Demo1.vue'
export default {
  name: "App",
  components: {Demo1},
};
</script>

这样页面中就会显示出// 这只是一句话

------------------------------------------------------------------
第二种方法传入数据
那如果我要更改msg数据呢，即在html中定义了msg，通过父组件修改msg
子组件同上

父组件
<template>
  <Demo1 :msg="message"></Demo1>
</template>
<script>
import Demo1 from './components/Demo1'
export default {
  name: "App",
  components: {Demo1},
  data(){
    return {
      message:"我是message"
    }
  }
};
</script>
显示// 我是message