介绍
Vue中单向数据流指的是父组件可以传值给子组件,子组件不能直接修改父组件传的值
效果
代码
保证子组件修改父组件参数时,不影响其他引用改参数的组件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lesson 16</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// v-bind="params"
// :content="params.content" :a="params.a" :b="params.b" :c="params.c"
// 属性传的时候,使用 content-abc 这种命名,接的时候,使用 contentAbc 命名
// 单项数据流的概念: 子组件可以使用父组件传递过来的数据,但是绝对不能修改传递过来的数据
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');
</script>
</html>