关于vue.js: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>