Vue组件

VUE组件

全局组件

注意事项

• 组件中的data必须是一个函数，这样就能让各个组件的数据独立。
• template必须有个明确的根元素，简单说就是最外层必须是一个标签，还可以使用ES6模板语法
• 可以是用短横线的方式命名,也可以使用驼峰的方式(驼峰的方式,在组件的模板中可以直接使用，但是在vue的html代码中必须使用横线的方式使用)

// 注册组件
// Vue.component('BtnCounter',function(){
Vue.component('btn-counter',function(){
    // 组件中的data必须是一个函数
    data: function(){
        retrun {
            count: 0
        }
    },
    // template必须有个明确的根元素，简单说就是最外层必须是一个标签
    // template: '<button @click="count++">点击了{{count}}次</button>',
    template: '<button @click="handle">点击了{{count}}次</button>',
    methods: {
        handle: function(){
            this.count++;
        }
    }
});
    
// 组件使用
<div id="app">
    <button-counter></button-counter>
</div>

局部组件

局部组件只能在注册它的父组件中使用

• 方式1

const HelloWorld = Vue.extend({
  template: '<div>{{ msg }}</div>',
  data: function () {
    return {
        msg: 'helloworld'
    }
  }
})

var vm = new Vue({
    el:'#app',
    data: {
        
    },
    components: {
        'hello-world': HelloWorld
    }
});
    
<div id="app">
    <hello-world></hello-world>
</div>

• 方式2(这是方式1的简写版本，看似没有调用extend，但是其实vue在底层帮你调用了)

var HelloWorld = {
    data: function(){
        retrun {
            msg: 'helloworld'
        }
    }
    template:'<div>{{msg}}</div>'
}
    
var vm = new Vue({
    el:'#app',
    data: {
        
    },
    components: {
        'hello-world': HelloWorld
    }
});
    
<div id="app">
    <hello-world></hello-world>
</div>

单文件组件

// 子组件
<template>
    <div>
        <h1 class="hi">{{ msg }}</h1>
    </div>
</template>
<script>
export default {
    name: 'children',
    data() {
        return {
            msg: "欢迎"
        }
    }
}
</script>
<style>
.hi {
    background-color: black;
}
</style>

// 父组件
<template>
    <div id="app">
        <children></children>
    </div>
</template>

<script>
import children from './children'
new Vue({
    el:'#app',
    data: {
        
    },
    components: {
        children
    }
});
</script>

父子组件传值

父传子

使用props，详见props介绍

子传父

1.函数形式

// 子组件
<template>
    <div>
      <h1>{{ msg }}</h1>
      <div>姓名：{{name}}</div>
      <div>地址：{{address}}</div>
      <button @click="sendInfo">把子组件数据给父组件</button>
    </div>
</template>
<script>

import mixin from './mixin/mixin'

export default {
  name: 'Student',
  data () {
    return {
      msg: 'Welcome',
      name: '仙剑',
      address: '余杭镇'
    }
  },
  props: ['getChildInfo'],
  methods: {
      sendInfo() {
          this.getChildInfo(this.name)
      }
  }
}
</script>

// 父组件
<template>
  <div>
    <School :getChildInfo="getChildInfo"></School>
  </div>
</template>

<script>
import School from './School.vue'

export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  components: {
    School
  },
  methods: {
    getChildInfo(val) {
      console.log("这是子组件给我的数据", val)
    }
  }
}
</script>

2. 自定义事件形式

// 子组件
<template>
    <div>
      <h1>{{ msg }}</h1>
      <div @click="handleClick">姓名：{{name}}</div>
      <div>姓名：{{childName}}</div>
      <div>年龄：{{age}}</div>
      <button @click="sendInfo">把子组件数据给父组件</button>
    </div>
</template>
<script>

import mixin from './mixin/mixin'

export default {
  name: 'Student',
  data () {
    return {
      msg: 'Welcome',
      childName: "随便de"
    }
  },
  mixins: [mixin],
  props: {
    name: {
      type: String,
      requried: true
    },
    age: {
      type: Number,
      default: 18
    }
  },
  methods: {
    sendInfo() {
      this.$emit("getchildrenInfo",this.childName)
    }
  }
}
</script>


// 父组件
<template>
  <div>
    <Student name="景天" :age="20" @getchildrenInfo="getchildrenInfo"></Student>
  </div>
</template>

<script>
import Student from './Student.vue'

export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  components: {
    Student
  },
  methods: {
    getchildrenInfo(val) {
      console.log("这是子组件给我的数据", val)
    }
  }
}
</script>

3. ref获取数据

// 子组件和第二种方式一样的

// 父组件
<template>
  <div>
    <Student name="景天" :age="20" ref="student"></Student>
  </div>
</template>

<script>
import Student from './Student.vue'

export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  components: {
    Student
  },
  mounted() {
    this.getChildInfoOfRef()
  },
  methods: {
    getChildInfoOfRef() {
      console.log("这是ref获取数据", this.$refs.student.childName)
      this.$refs.student.$on('getchildrenInfo',this.getchildrenInfo)
    },
    getchildrenInfo(val) {
      console.log("这是子组件给我的数据", val)
    }
  }
}
</script>