单向数据流的概念：子组件可以使用父组件传来的数据，但是绝对不能修改父组件里传递过来的数据，因为父组件可以把一个数据传递给多个子组件，如果一个子组件改变后会出现问题，所以 Vue 里不允许子组件修改父组件里传来的数据
单向数据流
父组件 index.vue
<template> <div> <!-- 3.使用子组件，标签的格式就可以 --> <!-- 4.给子组件传值，content 为子组件声明的变量，count 为父组件里 data 声明的变量 --> <test :content='count'/> </div> </template> <script> import Test from './test1' // 1.导入子组件 export default { components:{ Test }, // 2.声明子组件 data(){ return{ count: 1 } } } </script>
子组件 test1.vue
<template> <div> <!-- 2.使用父组件里传来的值 --> <div @click="handleClick()">{{ content }}</div> </div> </template> <script> export default { // 接受父组件里传来的值，在 props 里接收 props:{ content: Number // 期望的是个 Number 类型的 }, methods:{ handleClick(){ this.content += 1 // 每次点击给 content + 1 } } } </script>
当我们点击 页面上的 1 时，会报错，因为 Vue 不允许子组件修改父组件的数据
那我们就不能修改父组件传来的数据了吗？当然可以，我们可以在子组件里声明一个自己的变量，把父组件的值赋值给就可以了，修改 test1.vue 里的代码
<template> <div> <div @click="handleClick()">{{ myContent }}</div> </div> </template> <script> export default { // 接受父组件里传来的值，在 props 里接收 props:{ content: Number // 期望的是个 Number 类型的 }, data(){ return{ myContent: this.content // 将父组件里的数据传给自己的变量 } }, methods:{ handleClick(){ this.myContent += 1 // 每次点击给 myContent + 1 } } } </script>
这样点击页面上的元素就不会报错了
Non-Props属性
Non-Props属性就是父组件传给了子组件数据，但是子组件没有在 props 里接收。下面来介绍我们怎么使用这些属性
子组件 test1.vue
<template> <div> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </template> <script> export default { // 不接受父组件里传来的值 data(){ return{ } }, } </script>
父组件 index.vue
<template> <div> <!-- 给子组件传值，子组件没有接收下面的三个属性，这些属性就是 Non-Props 属性 --> <test :content='count' msg='hello' style="color:red"/> </div> </template> <script> import Test from './test1' // 1.导入子组件 export default { components:{ Test }, // 2.声明子组件 data(){ return{ count: 1 } } } </script>
刷新页面
可以看到，如果子组件没有接收父组件传来的值，子组件会将这些数据放在最外层的元素上
如果不想将 Non-Props 属性作用在子组件最外层的元素上，可以给子组件使用 inheritAttrs:false
test1.vue
<template> <div> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div> </template> <script> export default { // 不接受父组件里传来的值 inheritAttrs:false, // 不将 Non-Props 属性作用在子组件最外层的元素上 data(){ return{ } }, } </script>
刷新页面，查看 DOM 元素效果
也可以给指定的标签渲染父组件的某个数据，使用 $attrs 属性
<template> <div> <div v-bind="$attrs">内容1</div> <!-- v-bind="$attrs" 所有的 Non-Props 属性作用在这个标签上 --> <div :content="$attrs.content">内容2</div> <!-- :content="$attrs.content" 只将 content 属性作用在这个标签上 --> <div :mag="$attrs.msg">内容3</div> <!-- 只将 msg 属性作用在这个标签上 --> </div> </template> <script> export default { // 不接受父组件里传来的值 inheritAttrs:false, // 不将 Non-Props 属性作用在子组件最外层的元素上 data(){ return{ } }, } </script>
刷新页面，查看 DOM 元素效果
