[JavaScript知识库]vue笔记4

组件传值问题

父向子传值时的props

props 就是父组件给子组件标签上定义的属性，用来接收父组件传递的数据，props 的值可以是字符串数组，也可以是各自的名称和类型，用法和 data 中的数据用法一样，在子组件中只能使用该值，不能修改，不要和子组件data中属性重名

    <div id="app">
        <my-component :data='appStr'></my-component>
    </div>

import Vue from 'vue';
new Vue({
    components: {
        'myComponent': {
            template: `
                    <form action="javascript:;">
                        姓名：<input type="text" v-model="value">
                        <br>
                        密码：<input type="password">
                        <div> {{ str }} </div>
                        <div> {{ reverseStr }} </div>
                    </form>
                `,
            // props中的值可以直接当作是在data中的值来使用
            props: {
                data: {
                    type: String,
                    default: '1'
                }
            },
            created() {
                console.log(this.data);
            },
            data: function() {
                return {
                    value: '123',
                    str: 'hello,component'
                }
            },
            computed: {
                reverseStr() {
                    return this.data;
                }
            }
        }
    },
    data: {
        appStr: '我是app的data属性,通过props传给myComponent组件'
    }
}).$mount('#app');

属性props为对象时

props: {
	propA: Number,		// 基础的类型检查 (`null` 匹配任何类型)
	propB: [String, Number],	// 多个可能的类型
	propC: {	
        type: String,
     	required: true	// 使用该子组件时propC为必传的属性，且类型为String
   	},
	propD: {	
        	type: Number,
      		default: 100	// 带有默认值的数字
    	},
	propE: {	
        type: Object,	// 带有默认值的对象
		default: function () {	// 对象或数组默认值必须从一个工厂函数获取
        		return { message: 'hello' }
      		}
    	}
  }

class 属性不会被组件模板覆盖掉，而是叠加。

<component3 :datas="stus" class="iii"></component3>
let component3 = {
    template: `
        <div class="yyyy">
            <p>component3</p>
            <p v-for="item in datas">
                {{ item.name }} | {{ item.age }} 
            </p>
        </div>
    `,
    props: ['datas']
};
// 实际渲染
<div class="yyyy iii"></div>

单文件组件

创建一个.vue 文件，支持<template>、<script> 和 <style>语言模式。

1、webpack 配置对.vue 文件的支持

2、设置单文件组件为局部组件与全局组件

import myTag from "./src/components/myTag.vue";
import myTitle from "./src/views/myTitle.vue";

Vue.component("my-tag",myTag)

{
    data:function(){	return {};	},
    components:{
        "my-title":myTitle
    }
}

3、scoped 样式控制与lang 属性

4、render函数：定义组件时，使用template来创建组件的html结构是常用的方法，但是有些时候代码会比较冗长，Vue提供了渲染函数render来解决这个问题。

import app from "./src/app.vue";

new Vue({
    render:function(createElement){
        createElement(app);
    }
}).$mount("#app")

组件data 与插槽

插槽的使用

1、我们需要在定义组件的template中定义slot标签 在页面上使用的时候可以直接自定义写一些标签或者文字，将会被插入到有slot标签的地方 如果定义多个slot,就会插入多次;

2、具名插槽，如果我们想自定义写的能够放到对应的插槽的位置首先需要在定义组件的template中写slot标签，并且给slot标签一个名字name 999999，然后在使用插槽的地方通过标签的属性加上 slot=“last” 来使用 8888888

 <div id="app" v-cloak>
        <my-list class="myList">
            23132232
            <div slot="myslot">我是插槽</div>
        </my-list>
        <my-list class="myList">
            <!-- 我是插槽 -->
            <div slot="last">8888888</div>
        </my-list>
        <!-- 
            属性的使用
            1、在页面使用组件的时候可以通过属性传入值，在组件注册时，通过props数组接收，
                可以接收多个属性，并在模板中使用
            2、在模板中使用时，可以通过{{}}、v-bind 来使用传过来的属性与正常的节点使用无区别
            3、在页面同样可以通过v-bind传入一个动态的属性值 
        -->
        <my-div hover="active"></my-div>
        <my-div hover="active two"></my-div>
        <my-div :hover="hover" :tip="tip"></my-div>
    </div>

import Vue from 'vue';
Vue.component('my-list', {
    template: `
    <div>
        <slot>我是插槽默认数据</slot>
        <ul>
            <li><slot></slot></li>
            <li>666666</li>
            <li><slot name='last'>999999</slot></li>
        </ul>
    </div> `
});

Vue.component('my-div', {
    template: `<div>
        <h4 :title="tip">标题4 {{ hover }}</h4>
    </div>`,
    props: ['hover', 'tip']
});

new Vue({
    el: '#app',
    data: {
        students: [],
        loading: false,
        hover: '0123456789',
        tip: '这是动态的属性传值'
    }
})

注意：注册组件时可以采用驼峰命名法，但组件在页面上使用时，组件名需要用短横线+小写形式连接**（编译时，会全部编译成小写的，使用驼峰命名会找不到）