Vue单向数据流
Vue 的单向数据流
·
Vue 的特性单向数据流,指数据一般从父组件传到子组件,子组件没有权利直接修改。
父组件传来的数据,即子组件从props中直接获取的数据,只能请求父组件修改数据再传给子组件,父组件属性值的更新会下行流动到子组件中。
1)如果传很多参数时,可在data定义一个params对象,在父组件写在一起, 使用v-bind="params"绑定。
等同于:content="params.content" :a="params.a" :b="params.b" :c="params.c"
const app = Vue.createApp({
data() {
return {
params:{
t:1234,
a: 123,
b:456,
c:789
}
}
},
template: `
<div>
<test v-bind="params"/>
</div>
`
});
app.component('test', {
props: ['t','a','b','c'],
template: `<div>{{t}}-{{a}}-{{b}}-{{c}}</div>`//1234-123-456-789
});
const vm = app.mount('#root');
2)大小写传参,特殊语法
传和接的命名:
传的时候,父组件使用 content-abc 这种命名;
接的时候,子组件使用驼峰命名 contentAbc ,否则就会提示错误。
示例:
接的时候,采用父组件传的名称 content-abc, 控制台打印Nan
const app = Vue.createApp({
data() {
return {
content:1234
}
},
template: `
<div>
<test :my-content="content"/>
</div>
`
});
app.component('test', {
props: ['my-content'],
template: `<div>{{my-content}}</div>`
});
const vm = app.mount('#root');
正确的写法:
const app = Vue.createApp({
data() {
return {
content:1234
}
},
//html不支持驼峰语法,很长的情况下可以加横杠
template: `
<div>
<test :content-abc="content"/>
</div>
`
});
app.component('test', {
// 但在props中接受的时候,要用驼峰命名
props: ['contentAbc'],
template: `<div>{{contentAbc}}</div>`//1234
});
const vm = app.mount('#root');
3)总结
子组件可以使用父组件传递过来的数据,但是绝对不能修改传递过来的数据。子组件不能更改父组件,根本原因会导致数据耦合,避免组件之间数据藕合,怕以后存在很难找的bug。
错误例子示范:
const app = Vue.createApp({
data() {
return { num: 1 }
},
template: `
<div>
<counter :count="num" />
<counter :count="num" />
<counter :count="num" />
</div>
`
});
// 子组件可以使用父组件传递过来的数据,但是绝对不能反向修改父组件传递过来的数据
app.component('counter', {
props: ['count'],
template: `<div @click="count += 1">{{count}}</div>`
});
const vm = app.mount('#root');
系统会报错:意思是说子组件接收到的数据是只读的,数据只能在父组件中修改。
正确的写法,示例:可以利用自己组件中data的变量,来存储count。
const app = Vue.createApp({
data() {
return { num: 1 }
},
template: `
<div>
<counter :count="num" />
</div>
`
});
// 子组件可以使用父组件传递过来的数据,但是绝对不能反向修改父组件传递过来的数据
app.component('counter', {
props: ['count'],
// 可以利用自己组件中data的定义自己的变量mycount,来存储count。
data(){
return {
mycount:this.count
}
},
template: `<div @click="mycount += 1">{{mycount}}</div>`//点击加1
});
const vm = app.mount('#root');
更多推荐
已为社区贡献1条内容
所有评论(0)