码迷,mamicode.com
首页 > 其他好文 > 详细

vue学习之组件

时间:2019-02-17 00:49:42      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:span   import   ams   label   引用   点击   ret   script   log   

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>

 

vue学习之组件

标签:span   import   ams   label   引用   点击   ret   script   log   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!