vue学习之组件

vue官方文档中定义组件通过调用Vue.component方法，一般没使用

定义组件

一个组件为一个vue文件，包含template（必须有），script，style三部分

//com.vue<template lang="html">
  <div>//只能有一个html标签包裹里面所有节点
　　　child component{{name}}
  </div>
</template>
<script>
    export default{

　　　　data(){//data部分必须是个函数，返回一个对象。当前组件可以使用data里面的数据  　　　　return {           name:‘com‘  　　　}}

}
</script>
<style lang="css">
</style>

引用组件

比如在App.vue中引用上面的com.vue，三步：import组件，在components里注入，在template使用

<template>
  <div id="app">
     <com></com>
  </div>
</template>

<script>
import com from "./components/com.vue"
export default {
  name: ‘App‘,
  components:{
    com  }
}
</script>

什么叫做父子组件

上面例子中，App.vue的components上挂载了component这个组件，其中App.vue是父组件，component是子组件。

父子组件如何通信

在子组件中声明props，接收父组件传过来的数据。

ps：props数据传递是单向的，只能从外到里传递。

<template lang="html">
  <div>
    年龄：{{age}}
    名称：{{name}}
  </div>
</template>
<script>
    export default{
      props:[‘age‘],
      data(){
        return{
          name:‘com‘
        }
      }
    }
</script>
<style lang="css">
</style>

在父组件中传递age这个数据：（可以传递静态数据或者动态数据）

<template lang="html">
  <div>
    <com age="19"></com>//静态数据    <com :age="ageNum"></com>//动态数据：变量
  </div>
</template>
<script>
  import com from "./components/com.vue"
  export default{
    components: {
      com
    },
    data(){
      return {
        ageNum: 18
      }
    }
  }
</script>
<style lang="css">
</style>

自定义事件

通过自定义事件，可以将子组件的数据发送到父组件。自定义事件使用$emit。比如下面，点击子组件的这个按钮（子组件接收的用户行为），触发父组件自定义的patch事件，执行patch事件的处理函数msg3，改变父组件的ageNum数据

在子组件中代码：

<button type="button" name="button" @click="$emit(‘patch‘,[参数])">发送到父组件</button>

父组件中代码：

<com :age="ageNum" @patch=‘msg3‘></com>//动态数据：变量

export default{    data(){      return {        ageNum: 18      }    },  methods: {　　msg3(params){　　　　　//params:子组件传递过来的参数　　　　　this.ageNum++　　}　}}

插槽slot

除了前面传递变量改变组件，slot给组件定义了一个插槽，根据组件的使用者，可以在slot处插入其他的内容，使组件具有更大的灵活性,达到动态改变组件的目的。

比如有这么个需求，一个组件中，有body部分，有footer部分，而不同页面引用这个组件，需要用不同的footer，这是时候，这个footer部分，就可以用slot来实现。

如何使用插槽

子组件中

<template lang="html">
  <div>   <slot name="a"></slot>
　　<button type="button" name="button" @click="$emit(‘patch‘,[参数])">发送到父组件</button>
   <slot name="b"></slot>
  </div>
</template>

父组件中

<template lang="html">
  <div>
    <com age="19">　　　　<h1 slot="a">加在子组件slot的name为a的位置处</h1>       <h1 slot="b">加在子组件slot的name为b的位置处</h1>    </com>//静态数据
  </div>
</template>

原文地址：https://www.cnblogs.com/yaoyao-sun/p/10363246.html