[JavaScript知识库]关于vue的scoped属性及v-model及sync修饰符

关于sync语法糖

如果你要传一个属性进一个组件并且你也希望在内部可以修改这个属性

父

<demo :money.sync="money"></demo>
这行代码做了两个事
1.是将这个money传入了这个demo组件
2.监听一个@updata:money事件

子

<template>
	<div>
        {{money}}
        <button @click="handleClick">改变money</button>
    </div>
</template>
<script>
export default{
props:{
        money:String
 },
methods:{
    handleClick(){
        this.$emit("updata:money","200");
	}
}  	
 }
</script>

关于scoped属性

scoped会给当前组件模版中的所有的元素添加一个随机的属性

scoped会给当前组件中的所有的样式也添加一个随机的属性选择器

所以我们会在组件内试图改变其他组件传入的样式是改变不了的,只能使用::v-deep或者/deep指令/

关于v-model事件

本质上是在组件内传入了一个属性

并且监听了一个input事件

在子组件内我们可以使用

this.$emit("input",this.localName);