Vue组件化使用详解

上篇我们已经详细介绍Vue组件化入门详解中提到过，我们创建的组件在src文件夹下的component文件中。我们知道前段界面由html,css,js组成，与之相似，Vue组件话由template(模板)、script（脚本）、style（样式）组成。

1. template里面写我们需要的模板，但所有写的标签都要用一个仅且只有一个容器存放

2. script 里面存放我们定义的变量以方法，值得注意的是，在Vue中定义存放变量的data容器可以直接用花括号{}包裹起来，但是在组件化中，会报错，因为会造成传址问题，所以Data里面的变量需要放在一个函数里面。

3. style与前端界面一样，设置元素的样式，只是比之前的style 多了一个scoped，带有scoped标明在该style标签里面设置的样式，只会在该文件下有效，即不会对其他文件造成影响。

<template>
    <div>
      <h1>我是MyCompontent里面的内容</h1>
      {{ message }}
    </div>
</template>
<script>
    export default {
        name: "my-compontent",
        data:function () {
          return{
            message:"这是MyComponent里面的测试数据"
          }
        }
    }
</script>
<style scoped>
</style>

在主入口App.vue中，我们需要将上述组件化的Vue导入进来。导入当然要在script中导入

import MyCompontent from '@/components/MyCompontent'

然后在component组建中加入导入的文件名称，之后在模板template中定义的仅且只有一个容器中引用。注意，可以是单标签引用，也可以是双标签引用。两者没有什么区别，只是双标签可以利用插槽传数据

父级往子级传递数据

1. 通过属性传参

重新创建一个Person.vue组件

在父级template中将Person文件引入进来，并在div中编写

<person
    username="张三"
    :height="183"
    color="黄色"
    ></person>

    <person
      username="李四"
      :height="186"
      color="黑色"
    ></person>

在Person标签中添加属性，类似于我们在div中编写行间样式一样。height前面加上: 表示变成动态属性。

由于组件实例的作用域是独立的，这意味着在子组件的模板中不能直接引用父组件的数据，而要子组件使用父组件的数据，我们需要通过子组件的props选项
而props可以直接定义为

props:['username','sex','height'],

也可以类似于Schema定义方式,这样定义类型之后，由于我们在父组件中的height是动态属性，即会根据子组件中的类型进行匹配，所以此时传过来的height数Number类型的值

获取到父组件传过来的数据后，就可以直接在页面中直接使用

props:{
          username:{type:String},
          sex:{type:String},
          height:{type:Number}
        }

2. 使用插槽方法

这种方法可以直接引用公共部分，如引用公共部分的头部，尾部等

新建一个mySlot组件
在父组件中引用该组件，并在div中编写

<my-slot>
      <!--具名插槽-->
      <p slot="header">我是头部</p>
      <p slot="footer">我是底部</p>
      <p>我是插槽里的内容</p>
    </my-slot>

在mySlot文件中的div接收从父组件传递过来的数据，用slot标签，而且使用header 、 footer文件时，需要早mySlot 加上name属性

<template>
    <div>
      <!--这里的标签必须用slot-->
      <!--这里引用header footer的时候 用name属性引用-->
      <slot name="header"></slot>
      <slot>这里是Slot里面的数据</slot>
      <slot name="footer"></slot>
    </div>
</template>

<script>
    export default {
        name: "my-slot"
    }
</script>

<style scoped>

</style>

<template>
    <div>
      <p>姓名是：{{username}}</p>
      <p>年龄是：{{sex}}</p>
      <p>身高是：{{height}}</p>
    </div>
</template>
<script>
    export default {
        name: "person",
        // props:['username','sex','height'],
        props:{
          username:{type:String},
          sex:{type:String},
          height:{type:String}
        }
    }
</script>
<style scoped>

</style>

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <!--<HelloWorld/>-->
    <!--<MyCompontent></MyCompontent>-->

    <!--<Person-->
      <!--username="DR"-->
      <!--sex="1"-->
      <!--height="168xm"-->
    <!--&gt;</Person>-->
    <!--<Person-->
      <!--username="RR"-->
      <!--sex="2"-->
      <!--height="168cm"-->
    <!--&gt;</Person>-->

    <!--<my-slot>-->
      <!--<p>这是App里面的mySlot数据1</p>-->
      <!--<p slot="header">这是头部</p>-->
      <!--<p slot="footer">这是尾部</p>-->
    <!--</my-slot>-->

    <!--@myfn 是自己传过来的事件-->
    <!--fn 是父级接受子级传递过来的数据存放的地址-->
    <!--<Emit @myfn="fn"></Emit>-->

    <Transition></Transition>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import MyCompontent from '@/components/MyCompontent'
import Person from '@/components/Person'
import mySlot from '@/components/mySlot'
import Emit from '@/components/Emit'
import Transition from '@/components/Transition'

export default {
  name: 'App',
  components: {
    HelloWorld,
    MyCompontent,
    Person,
    mySlot,
    Emit,
    Transition,
  },
  methods:{
    //mydata是从父级传递过来的事件、参数
    fn:function (mydata) {
      console.log(mydata)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>