Vue对象常用属性

数据属性data

数据属性的基本用法

new Vue({
    data:{
        '带引号的键'：值,
        url:"www.baidu.com" // 带引号的键
    }
})

在Vue实例中，我们通常会定义一些数据属性，这些数据可以直接被用于被挂载的标签中插值或绑定属性。数据属性在Vue对象的data属性中，但是可以直接通过对象.出来。

防止引用冲突的数据属性

常在Vue组件的定义中使用：

Vue.component('home',{
	template:``,
	data(){return{
		'数据对象键':'数据对象值'
	}}
})

因为对象是引用传值的，对于要复用的组件来说，直接将data属性绑定一个对象会造成引用冲突，所以我们通过函数每次产生一次数据对象传出。

方法属性methods

方法属性集合存储Vue对象中定义的函数，这里的属性也可以直接被直接.出。

new Vue({
    methods:{
        handleXxx(){
            console.log(this)  // vue对象本身
        },
    }
})

如果将方法属性中的函数作为插值调用函数()传入html界面，无论什么数据发生了更新，这个函数都会重新执行一遍，但我们只需要在相关数据发生变化时才需要重新执行，此时就需要介绍计算属性。

计算属性computed

只有函数体的相关数据发生变化时才会重新执行计算的函数集合
调用时会伪装成数据属性，要返回出计算（运行）结果
集合与Vue对象的computed属性

<div id="app">
    <input type="number" v-model.number="numList[0]">
    <input type="number" v-model.number="numList[1]">
    <input type="number" v-model.number="numList[2]">
    <input type="number" v-model.number="other">
    <p>{{getSum()}}</p>   调用时作为函数调用
    <p>{{sumList}}</p>  调用时作为数据属性使用
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {numList: [1, 2, 3], other: 0},  // 将此列表分元素绑定几个数字输入框，使其方便变化
        // 函数
        methods: {
            getSum() {
                console.log('普通函数执行了')
                let total = 0
                for (let num of this.numList) {
                    total += num
                }
                return total
            },
        },
		// 计算属性
        computed: {
            sumList() {
                console.log('计算属性函数执行了')
                let total = 0
                for (let num of this.numList) {
                    total += num
                }
                return total
            }
        }
    })
</script>

监听属性watch

监听简单理解就是对data数据进行一个change事件绑定，当数据发生变化时会触发一个函数的执行。

定义方式：

new Vue({
    watch:{
        属性名(){
          // 属性变化时触发的代码  
        },
    }
})

对输入框的数据进行监听：

<div id="app">
    <input type="text" v-model.trim="inputText">
    <p v-for="word in filterWord">{{word}}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            inputText: '',
            hotWord: [
                "怎么装机","怎么装一台机器", "怎么养鸡",
                "怎会如此","鸡你太美", "现有鸡还是现有蛋",
            ],
            filterWord: this.hotWord,
        },
        methods: {},
        watch: {
            inputText() {
                this.filterWord = this.hotWord.filter(
                    word => word.indexOf(this.inputText) >= 0
                )
            }
        }
    })
</script>

对数据发生变化的事件控制更加的简单
不局限于对input框的数据变化做监听

组件属性components

用于注册子组件的属性，可以直接在内部书写，也可以在外部定义好对象后，在内部直接注册。

let 组件3 = {templates。。。}
components:{
    组件1:{templates。。。},
    组件2:{templates。。。},
    组件3
}

组件自定义属性props

注册和调用：

components:{
    组件1:{templates。。。
        props:['outerattr'] // 这里注册的属性可以在组件标签中添加
		// props:{attr: String, num: Number}  // 注册的属性指定数据类型
		// props:{attr:{type: String, required: True, default:'默认值'}} 
		// 注册的属性加默认值和限制条件{属性值：{数据类型，必要性，默认值}}
        },
}
// 调用
templates:`<div>{{outerattr}}</div>`

从外部传入数据方式：

<组件1 :outerattr="rootdata"></组件1>

组件自定义事件

将子组件中的代码中添加this.$emit('自定义事件',数据)
在组件标签中@自定义事件名="外部函数"
外部函数需要定义形参接收子组件传输的数据

<组件 @自定义事件="外部函数"></组件>
<script>
	// 子组件定义
    let 子组件 = {
        ...
        methods:{func(){this.$emit('自定义事件',数据)}}
    }
    
    new Vue({
        ...
        methods:{
            xxx(数据形参){对数据形参进行处理，可以用于传值等}
        }
    })
</script>

mixin属性

我们可以将一些属性打包到一个对象中，这个对象中的属性与组件属性一致，有data、methods等属性。

这个对象以mixin注册到组件中，那么组件可以按照属性分类使用这些属性。

mixin一般用于提取多组件都会用到的数据方法等属性，以便各组件使用。

使用js导出mixin对象

其实就是正常的对象导出，不过这些属性对应组件要用到的属性：

// 举例 mixin/commonAttr.js
export default {
    data() {
        return {
            name: '都可能用到的数据属性',
            company: '公司信息',
            icoImg: '公司ico图片地址'
        }
    },
    created() {
        console.log('数据创建完成')
    }
}

引用mixin

局部注册

<template>
<div>这里直接按照data的方式插值mixins中的插值{{company}}</div>
</template>
<script>
// 组件中注册
import commonAttrs from "@/mixin/commonAttrs";

export default {
  ...
  mixins:[commonAttrs]
}
</script>

全局注册

//main.js中对Vue实例直接进行mixin混入，后续整个工程的组件都会混入
import commonAttrs from "@/mixin/commonAttrs";
Vue.mixin(commonAttrs)
// Vue.mixin(commonAttrs2)  全局也可以多混入几个
// 后续的所有组件都可以直接使用mixin对象中的属性。