data: 推荐用函数

为啥推荐data用函数呢？
防止出现一个date被多个组件共用的情况
如果是通过Import … from Vue文件得到的一个组件，再render这个组件

  1. 如果data是对象

    1. new Vue(Demo) 如果两次调用，那么两次调用都使用的是一个Data

  2. 如果data是函数，

    1. new Vue(Demo) 如果两次调用，因为每次使用data, 都会生成一个全新的对象，不会出现两个组件共用同一个data

组件component

Vue组件是带有名称的可复用实例

组件创建和使用的三种方式：

  1. Vue单文件组件（常用，体现模块化思想）

    1. 首先，将Vue文件import引用到当前实例文件中： import Demo2 from './demo2.vue'
    2. 在new Vue实例中写入名称以声明： components:{Demo2:Demo2}（一般名称定义与组件名称一致）
    3. 在template模板中插入组件标签以调用： template:
      ``
    4. 组件自定义名称要用大写开头（为了区别于原生实例中的标签）

  2. 原生JS

  3. 结合前两者
  1. import Demo2 from './demo2.vue'  // 第一种方式
  3. Vue.component('Demo3', {   // 第二种方式
  4.     template:`
  5.     <div>demo3333</div>
  6.     `
  7. })
  9. 用new Vue({})生成的对象是实例，我们可以在实例里使用组件：
  10. new Vue({
  11.     components: {
  12.         Demo2: Demo2
  13.         Demo4: {   // 第三种方式
  14.         template:`
  15.        <div>demo4444</div>`
  17.     },
  18.     template: `
  19.             <div>
  20.         <Demo2/>   // 在这里插入组件
  21.         <Demo3/>
  22.      </div>`,
  23. }).$mount('#app')

我是入口，我就是实例； 我用别人，别人就是组件；
顾名思义，组件就是组合而成的物件，其实组件 component中存放的物件和Vue实例一样，换而言之，组件实则是“Vue实例中的实例”，只不过是有自定义名称的实例

外部属性props

相对于date内部数据而言，用于从父组件接收数据的数组或对象

传递静态或动态的 Prop
传入一个静态的值：

  1. <blog-post title="My journey with Vue"></blog-post>

通过 v-bind 或简写 : 动态赋值传入动态的值：（此时双引号内是原生JS）

  1. <!-- 动态赋予一个变量的值 -->
  2. <blog-post :title="post.title"></blog-post>
  4. <!-- 动态赋予一个复杂表达式的值 -->
  5. <blog-post :title="post.title + ' by ' + post.author.name"></blog-post>

props的声明和调用方式：

声明：在子组件js部分声明props并自定义属性名

  1. //demo.vue文件中
  3. <template>
  4.     <div class="red">
  5.         这里是demo内部
  6.         {{message}}
  7.         <button @click="fn">call fn</button>
  8.     </div>
  9. </template>
  11. <script>
  12.     export default {
  13.        props: ['message', 'fn']  //可以在Vue组件上注册一些自定义 attribute 表示声明
  14.     }
  15. </script>
  17. <style scoped>
  18. .red {
  19.     background: coral;
  20.     border: 1px solid red;
  21. }
  22. </style>

调用：在父组件的模板中调用；通过静态、动态传值给子组件

  1. main.js
  3. const Vue = window.Vue
  4. Vue.config.productionTip = false
  5. import Demo from './demo.vue'
  7. new Vue({
  8.     data: function () {
  9.         return {
  10.             n: 0
  11.         }
  12.     },
  13.     components: {Demo},
  14.     template: `
  15.             <div>
  16.                这里是外部的实例：{{n}}
  17.                 <Demo :message="n" :fn="add"></Demo>     //动态传值利用冒号；在模板中插入调用props
  18.             </div>
  19.     `,
  20.     methods: {
  21.         add() {
  22.             this.n += 1
  23.         }
  24.     }
  26. }).$mount('#app')