Vue学习之组件学习

                                                                                                                                                                 第二章

组件开发

一、模板分类：使用组件时：为了减少template中html模板的复杂度，使用分离模板的方式：

1、 第一种：把模板写到template标签里面，再加入id属性，组件template：‘#id的名称’

2、 第二种：创建scriot标签，

当props中接收数据的名称是多个单词组成时，使用驼峰命名法，这里的驼峰命名法是在首字母还是小写，前面加横杠，使用驼峰命名法时只有父组件给子组件赋值时使用，其他地方按照原来的不变

1、子传父：

  （1）、子组件模板按钮或者列表中监听自定义的点击事件@click="btnclick(items.id)"，items.id是传给父组件的数据

  （2）、子组件中定义methods: {btnclick(item) {this.$emit('item-click',item)}}，btnclick是自定义的点击事件，this.$emit('item-click',item)传给父组件的方法，'item-click传给父组件的自定义的点击事件名称

（3）、在父模板的自定义标签中监听子集传过来的点击事件，把item参数传给父组件中cclick自定义点击事件

（4）、methods: {cclick(item) {console.log(item);}}

子传父代码实例：

    
"app">
        "mmuy" @item-click="cclick">//用子组件传出的自定义事件的名称绑定根组件的自定义名称点击事件把传入的id打印
    

    

1、 父子组件之间的相互传递（父传子，子组件props:接收，子传父，子组件监听事件中this.$emit自定义事件，父模板自定义标签中绑定自定义事件）

（1）、首先父组件传递给子组件数据后，子组件的数据要改变的时候props:{znum1: Number,znum2: Number}, data(){return {datanum1: this.znum1,datanum2: this.znum2}}首先把props中接收父组件的数据赋值给子组件的data中

（2）、其次在子组件模板中要改变数据的标签上把data中的数据绑定上，其次监听这个标签！！！

（3）、methods: {metnum1(event) {this.datanum1 = event.target.value;this.$emit('num1chuan', this.datanum1)}，event是接收input的value值，把改变后input的value赋给data上，在把data改变后的值传回父组件中！！

           （4）、或者子组件中input标签用v-model绑定实现双向绑定，v-model：“datanum1”，子组件中watch代替methods ，时间的名称和data中属性的名称一致，watch: { datanum1 (event) {this.datanum1 = event.target.value;this.$emit('num1chuan', this.datanum1)}，

watch是监听属性的改变，比如data中有一个name，监听是否改变，就可以用watch{name（newValue,oldValue）{ }} 注意：watch监听那个属性时，函数名称就是属性名称

 父子组件之间的相互传递的代码案例：

    
"app">
        "num1"  @num1chuan="num1chu">
    

    

四、父子组件的相互访问（父组件使用子组件中的对象）：

1、父组件访问子组件： 

        (1)、$refs 在父组件模板自定义的标签中加入ref=“aaa”属性，aaa名称随意命名

        (2)、$children

代码实例：

        ref="aa">
        "bintclick">按钮

2、子组件访问父组件：

（1）、当父组件是根组件时this.$root访问

（2）、当父组件不是根组件时this.$parent访问

代码实例：

//根组件

    


//子组件

//子组件中的子组件
    
  const app = new Vue({
           el: '#app',
           data:{
                 property: '你好呀',
           },
           components:{
               cpn:{
                   template: '#cpn',
                   data() {
                       return {
                           name:'我是第一个子组件'
                       }
                   },
                   components: {
                       ccppnn: {
                           template: '#ccppnn',
                           methods: {
                               btnclick() {
                                   console.log(this.$parent);
                                   console.log(this.$parent.name);
                                   console.log(this.$root);
                               }
                           }
                       }
                   }
               }
           }
       });

五、solt插槽的使用：（solt插槽解释说明：当使用组件化后，多个页面通同时使用同一个组件时，结构一样，内容不同时，在模板中使用插槽，如果很多内容相同，就有个别内容不同同时在solt标签中加入默认的内容，当自定义标签中有内容传到solt时，把默认内容代替）

代码示例：

"app">
        
        删除
        提交
        添加
    
    
    

六、具名solt插槽的使用：（具名solt插槽解释说明：当使用组件化后，子组建模板中有多个插槽，自定义的标签中只想改其中的一个插槽，在子组建模板的插槽中定义name=“·······san”名称，在自定义标签中的内容里添加solt=“san”寻找相应的插槽）

代码实例：

"app">
        "san">青岛人 
    

    

    

七、作用域solt插槽的使用：（作用域solt插槽解释说明：当使用多次子组件，但是每个组件显示数据的方式不同时，需要使用作用域插槽，获取子组件中的数据来显示不同的显示方式，首先子模板中插槽标签slot中把数据赋值给aa，其次在父模板自定义标签中写入template标签，slot-scope：“slot”作为template标签标签的属性，把slot标签中绑定aa的值赋给自身，循环的话也可以实现，但是最后会有一个---，使用join就不会出现这种结果！！）

代码实例：

"app">