vue组件

 

组件使用的基本步骤
创建组件构造器　　Vue.extend()方法    　　//在vue2.x版本后基本已经很少见了 用了新的语法糖代替
注册组件　　　　Vue.component()方法
使用组件　　　　在Vue的作用范围内使用组件

 

---

组件若标签内不需要传其他值的时候 可以使用单标签，可以使代码看起来更加简便  （但是 我试过会报错。。。所以能不用就不用吧。。。。）
例 Vue.component("cpn",{....})      注册完，在使用这个组件的时候 直接  <cpn/>

把一个部分作为一个组件

将里面的内容拆分为多个小组件

组件可进行重复使用
<hr>　　　　

全局组件和局部组件：

放在vue对象中注册的组件就是局部组件

放在vue对象外注册的组件就是全局组件
<hr>　　　　

父组件和子组件...

 

---

 组件模板template的分离写法

为什么将组件的template抽出来写？　　

因为在Vue.component()中写模板，没有代码提示、没有代码自动补全、非常的不方便。 而且若是写在一坨会使得代码显得可读性非常差

有两种方法：

①（不常用）将template模板写在<script type="text/x-template" id="---"></script>中   //这里的id是为了能让注册组件时能访问到

②（常用）将模板写在 <template id="---"></template>标签中 一般在写子组件的时候，我们都希望里面是有一个根标签的，来包住里面的内容

如何访问？  

Vue.component('组件名',{

　　template:"上面的id"

})

 

---

组件里的template内容能不能获取到Vue实例中的data数据？

不能，就算可以也不要这样做，因为若是将模板中的值全部写到Vue实例的data中，会让Vue实例中的data显得特别臃肿，东西很多

所以Vue组件就应该有自己存放数据的地方.

例　　Vue.component('cpn',{

　　template:"#--",

　　//这里的data不像Vue实例的data一样作为一个对象，这里必须为一个function，而且必须有返回值，这样template才能使用mustach语法来获得这些数据

　　data(){

　　　　return{

　　　　　　title:"maomao",

　}

}

})

 

为什么组件里的data要是一个方法？

每一个组件都需要有自己的状态，有自己独有的一个对象，也就是组件都是有个性的

因为当你在重复使用组件的时候，data是一个方法，每一个组件用的都是属于自己的data（因为function他有自己的作用域）每次都会产生一个新的对象组件之间互不影响。

不然当某一个组件的值发生改变时，将会带动其他组件也同时发生改变

<hr>

组件实例对象

可以现在Vue实例外面先定义一个组件实例对象，在Vue实例对象中注册局部组件时，直接调用即可。例如

　　　　　　　　const cpnC1 = {
                template: "。。。",
                methods: {。。。}
            }
            const vm = new Vue({
                el: "#app",
                data: {
                    counter: 0,
                },
                components: {
                    cpn1: cpnC1
                }
            })

组件其实有自己的空间，属于他自己的封闭空间， Vue实例中有的东西他基本都有

例如method、compute 　　　　所以组件的功能很强大，组件实例对象能重复使用，减少代码量，提高可阅读性

<hr>

父子组件之间的通信:

父传子：通过props属性来传递数据

子传父：通过发射一个事件来传递数据　　自定义事件$emit Event　　emit是发射的意思

 

父传子：

在组件中获取值的时候，只需要通过 给使用的组件标签中 加上 v-bind:数据名="父组件中的数据"  

目前Vue版本的 v-bind 不支持驼峰命名法， 可以使用 - 来代替，例如 cInfo →_→ c-info 在组件中获取参数时可直接使用cInfo获取
子组件中就能通过 props属性获取　　props:['data1']  可以是一个数组传多个数据，绑定多个数据就行   ，最好是使用对象，因为可以进行更多的操作和限制

//父传子: 使用props

const cpn = {
 　　template:'#cpn ',
  　　// props:[ 'cmovies ', ' cmessage' ],
  
  　　props:{
  　　　　//1、可以做到类型限制　　若他可以是多个数据类型的话 我们可以使用　　[　Number,String　]
  　　　　//这个Array意思是，子组件可以指定接收的数据类型   可以作为一个类型的限制
  　　　　//cmovies: Array, 
 　　　　//cmessage: String
 　　　　//2、提供data的默认值 在组件标签上没有传值的时候，他就会显示默认值
 　　　　cmessage:{
 　　　　type:String,
 　　　　default:'maomao'，
 　　　　//required属性就表示是必须传值的，若不传值就会报错
 　　　　required:true
 　　　　}
 
 　　　　cmovies:{
 　　　　type:Array,
 　　　　//default:[]，
 　　　　// 这里有一个需要注意的点，若你穿的是一个数组或者对象的时候，它的默认值必须是一个函数，通过return返回的
 　　　　default(){　　return [] }
 　　　　}　　
　　},

　　data() {return {

　　}},
methods: {
}
}

//自定义验证函数
propF: {
　　validator: function (value) {
　　　　//这个值必须匹配下列字符串中的一个
　　　　return ['success', 'warning'，’danger'].indexOf(value) == -1

}

也可以自定义类型

//自定义类型

function Person (fi rstName, 1astName) {
this. firstName = fi rs tName
this.lastname = lastName
}
Vue. component('blog-post', {
props: {
author: Person
}
})

 

子传父：

props用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。
我们应该如何处理呢？这个时候，我们需要使用自定义事件来完成。
什么时候需要自定义事件呢？
当子组件需要向父组件传递数据时，就要用到自定义事件了。 v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。
自定义事件的流程：
在子组件中，通过$emit()来触发事件。 在父组件中，通过v-on来监听子组件事件。
其中组件使用Vue实例的方法时，方法后不传参，下面的方法获取参数时他不会返回一个event，而是子组件传来的参数
原因是：由于是自定义事件而不是页面的原本的事件，就不会有$Event传过去，而是子组件所传参数

　　　　 <div id="app">
            <navbox itemclick="cpnClick"></navbox>
        </div>
        
        <template id="nav">
            <div>
                <button type="button" v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
            </div>
        </template>
        
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component("navbox",{
                template:"#nav",
                data(){
                    return {
                        categories: [
                          {id: 'aaa', name: '热门推荐'},
                          {id: 'bbb', name: '手机数码'},
                          {id: 'ccc', name: '家用家电'},
                          {id: 'ddd', name: '电脑办公'},
                        ]
                    }
                },
                methods:{
                    btnClick(item){
                        // 发射事件: 自定义事件
                        this.$emit('itemclick',item);
                    }
                }
            })
            
            const vm = new Vue({
                el:"#app",
                data:{
                },
                methods:{
                    cpnClick(item){
                        console.log("子组件传来的数据：",item)
                    }
                }
            })
        </script>