Vue3--单向数据流、Non-Props属性

单向数据流的概念：子组件可以使用父组件传来的数据，但是绝对不能修改父组件里传递过来的数据，因为父组件可以把一个数据传递给多个子组件，如果一个子组件改变后会出现问题，所以 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 元素效果