props验证与默认值，Vue的双向数据绑定，Vue组件父传子，子传父，兄弟通信

最新推荐文章于 2024-04-23 20:03:11 发布

会撸串的傻狍子

最新推荐文章于 2024-04-23 20:03:11 发布

阅读量433

点赞数

分类专栏：总结

本文链接：https://blog.csdn.net/L990614/article/details/112989959

版权

1. props验证与默认值

父props与子props是单向下行绑定：父级的props的值更新会流动到子组件中，但反过来却不行。
避免子组件意外改变父级组件的状态，导致数据流混乱。
每次父级组件发生更新时，子组件中所有的props都将会刷新为最新的值。
不能在子组件内部改变props，否则会导致浏览器控制台发出警告
子组件要修改时，用$emit调用自定义事件，父组件接到后由父组件修改
改变props的常用例子：
这个用来传递一个初始值；这个组件接下来希望将其作为一个本地的数据来使用，要定义一个本地属性用做初始值、
  props:['initialCounter'],
  data:function(){
  return{
  counter:this.initialCounter
  	}
  }
这个以一种原始的值传入且需要进行转换，定义一个计算属性
  props:['size'],
  computed:{
  normalizedSize:function(){
  return this.size.trim().toLowerCase()
  	}
  }

2. Vue的双向数据绑定

定义数据监听器Observer,能够对数据对象所有属性进行监听，数据有变动会获取新值并通知订阅者；
定义一个指令解析器Compile，对每个元素节点指令进行扫描，根据指令模板替换数据，以及绑定相应的更新函数；
实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图；

Vue实现双向数据绑定主要采用：数据劫持结合“发布-订阅”模式的方式，通过Object.defineproperty()的set和get,在数据变动是发布消息给订阅者触发监听。

Vue组件父传子，子传父，兄弟通信

1. 父传子：（通过props实现）

在父组件中给子组件标签绑定一个属性，属性上挂载需要传递的值；

在子组件通过props[“自定义属性名”]来接受数据；

以下是三种方法，没用vue写，引入vue.js文件，以下是HTML代码：

<body>
    <div id="app">
        <child></child>
    </div>
    <script src="./vue.js"></script>//引入vue.js文件
    <script>
        const child = {
    
            // props: ['msg'], // 第一种方法
            inject: ['name', 'age', 'tel'],
            template:  `
                <div>
                    这是子组件
                    {
     {msg}} {
     {name}} -- {
     {age}} -- {
     {tel}}
                </div>
            `,
            data() {
    
                return {
    
                    msg: ''
                }

最低0.47元/天解锁文章

会撸串的傻狍子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
props验证与默认值，Vue的双向数据绑定，Vue组件父传子，子传父，兄弟通信

1. props验证与默认值父props与子props是单向下行绑定：父级的props的值更新会流动到子组件中，但反过来却不行。避免子组件意外改变父级组件的状态，导致数据流混乱。每次父级组件发生更新时，子组件中所有的props都将会刷新为最新的值。不能在子组件内部改变props，否则会导致浏览器控制台发出警告子组件要修改时，用$emit调用自定义事件，父组件接到后由父组件修改改变props的常用例子：这个用来传递一个初始值；这个组件接下来希望将其作为一个本地的数据来使用，要定义一个本地属
复制链接

扫一扫