Vue.js 组件

1.组件的创建

vue的组件就是一个个vue文件，里面包含3个部分：
template：html模版
style：css样式
script：js代码

<template>
    <!-- 只能有一个根标签 -->
    <div>
        <p>{{msg}}</p>
    </div>
</template>

// lang表示所使用的CSS 预处理语言
// scoped表示里面的样式作用范围此局限在此组件中
<style lang="less" scoped>
    p{
        color:green
    }
</style>

<script>
export default{
    data(){
      return{
          msg:'hello wolrd'
      }
    },
    methods:{
    }
}
</script>

2.组件的引用

在父组件的script标签中使用import引入相关组件的vue文件，并注册到components对象中

// App.vue
<script>
import Hello from './components/Hello.vue'
export default {
    data() {
        return {
            
        }
    },
    components: {
        Hello
    }
}
</script>

之后可以以标签的形式在模版中使用此Hello组件

<template>
<div>
    <Hello />
</div>
</template>

组件传值

3.prop传值

(1)在父组件中把要传递的数据通过属性的形式绑定到子组件标签上
(2)在子组件中通过prop属性接收父组件传递的数据（属性名是什么，接收的名称就是什么）

父组件：

<template>
<div id="app">
    <h1>App组件</h1>
    <child :msg="msg" :person="person" :list="list"></Child>
</div>
</template>

<script>
import Child from "./components/Child.vue"

export default {
  data() {
    return {
      msg:"我是父组件传递的值",
      person:{name:"张三丰",age:108},
      list:['苹果','西瓜','桃子']
    }
  },
  components: {
    Child
  }
}
</script>

子组件：

<template>
  <div>
    <P>{{msg}}</P>
    <p>{{person.name}}--{{person.age}}</p>
    <ul>
      <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  props:['msg','person','list']
}
</script>

props接收父组件传递的数据有2种语法：简单语法和对象语法

//简单语法
props:['msg','person','list']

//对象语法，会检测传递值的数据类型
props:{
    msg:String,
    list:Array,
    person:Object
},

4.自定义事件

自定义事件可以将父组件的某个函数暴漏给子组件，子组件可以通过特定的方式来调用这个函数，并以传参的形式将子组件的数据传递给父组件
(1)在父组件中通过v-on的形式绑定一个自定义事件到子组件标签上，并设置自定义事件触发时的回调
(2)子组件通过this.$emit()方法来触发该自定义事件，并传入相应的参数给回调函数

//父组件 
//eventName为自定义事件的名称
//showMsg为mthods中定义的方法
<child @eventName="showMsg"></Child>

//子组件使用this.$emit()触发自定义事件
this.$emit('eventName',this.content)

还可以使用js语法来为自组件绑定自定义事件
语法：$on(‘事件名称‘,回调函数)

//设定子组件标签的ref标识
<child ref="child"></Child>

//通过ref标识找到子组件，并为其添加子定义事件
mounted(){
    this.$refs.child.$on('eventName',this.showMsg)
}

5.订阅和发布

通过第三方库来进行组件通信，例如pubsub-js，使用这个库可以让任意两个组件进行通信
订阅:PubSub.subscribe(‘事件名称‘, 回调函数);
发布:PubSub.publish(‘事件名称‘, 传递的参数);

安装pubsub-js

npm install pubsub-js -S

引入pubsub-js （订阅和发布的组件都需要引入

import PubSub from 'pubsub-js'

组件1添加订阅（相当于添加事件监听）

<script>
import PubSub from 'pubsub-js'
export default {
  data () {
    return {
      content:""
    }
  },
  mounted(){
    //在回调函数中添加订阅
    PubSub.subscribe('eventName', (eventName,data)=> {
      //参数一是固定的，为事件名称
      //参数二才是传递的参数
      console.log(eventName,data)
      this.handleClick(data)
    })
  },
  methods:{
    handleClick(data){
      this.content = data
    }
  }
}
</script>

组件2发布消息（相当于触发事件监听）

<script>
export default {
  data () {
    return {
      content:"我是传递的参数"
    }
  },
  methods:{
    handleClick(){
      //发布（触发事件监听）
      PubSub.publish('eventName', this.content);
    }
  }
}
</script>

Vue.js 组件

原文：https://www.cnblogs.com/OrochiZ-/p/11785442.html