父组件:
<template>
<div>
<aa class="abc" v-model="test" ></aa> // 组件中使用v-model
{{'外面的值:' + test}} // 这儿试验test与内部msg值为双向绑定关系
<button @click="fn">
外面改变里面
</button>
</div>
</template>
<script>
import aa from './test.vue'
export default {
data () {
return {
test: ''
}
},
methods: {
fn () {
this.test += 1
}
},
components:{
aa
}
}
</script>
<template>
<div>
<ul>
<li>{{'里面的值:'+ msg}}</li>
<button @click="fn2">里面改变外面</button>
</ul>
</div>
</template>
<script>
export default {
model: { // 使用model, 这儿2个属性,prop属性说,我要将msg作为该组件被使用时(此处为aa组件被父组件调用)v-model能取到的值,event说,我emit ‘cc’ 的时候,参数的值就是父组件v-model收到的值。
prop: 'msg',
event: 'cc'
},
props: {
msg: ''
},
methods: {
fn2 () {
this.$emit('cc', this.msg+2)
}
}
}
</script>
prop的单向绑定:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。官方文档解释
---------------------
方法1.我们通过['value']可以获取到父组件给子组件传递的值,用过注册input方法方法来通过子组件给父组件传值。(因为v-model是一个语法糖,他有两个方法,自动绑定value,自动触发input)
父组件
<div>
<child v-model="message"></child>
<!-- 通过v-model将message绑定在child上 -->
</div>
<script>
export default{
compoments:"child",
data(){
return{
message:"",
}
}
}
</script>
子组件
<div @click="click">
{{msg}}
<div>
// 子组件
export default {
name: '',
props: {
// 通过value获取绑定message值
value: {
type: String,
default: ''
}
},
data: {
// 你的数据
},
methods: {
click(){
this.msg+1
}
changeMessage() {
// 通过触发组件的input事件改变message的值,
// 此时父组件中的message值就改变为你设置的值了
this.$emit('input', 'your message value')
}
}
})
写法二