Vue学习中的知识点积累

this.list = [...results, ...this.list]; // 等同与   
this.list.unshift(...results);

//很多的场景中 使用 this.list = [...results, ...this.list];的方法会造成添加死循环 
//尝试使用 this.list.unshift(...results); 报错立马消失,

父子通信的props 如果是一个 数组，我们只要不重新赋值这个props里面的数组，就都不算修改props，而可以实现父子之间共享数据，实时变化。（其本质是父子用了一个引用数据类型的数据）

实现组件之间的数据传递,调用 父组件数据共享给子组件,子组件共享给父组件,子与子组件之间数据共享

子组件AAAA将 data里面的变量aaaa数据 修改成 props里面的属性aaaa用于去接收外面的空数组commentAaaa

子组件

data () {
    return {
    
      // aaaa: [],   // <===注释掉
    }
}  

props: {

  // 定义自定义属性aaaa，去接收外面的commentAaaaa 变量    
  aaaa: {
      type: Array,
      default: () => []
  }
}

父组件

data(){
	return{
	
		 commentAaaa: [] // xx数据
	}
}

 绑定给子组件

<comment-list
   
    :aaaa="commentAaaa" 
    
/>

 

为什么接收空数组呢，其实父组件的空数组不是为了传递给子组件，反而是让子组件把数据列表共享给父组件，因为父子通信关联的是引用数据类型，任何人一方改变了，另外一方都会变化。

组件之间 如果共享的是一个引用数据类型,任何一个组件修改(不赋值),其他都会变化

子组件A 一些数据可以传给子组件B,然再传给父组件  效果依旧可以

↓↓

官网查看的

provide / inject  简单使用

provide：Object | () => Object

inject：Array<string> | { [key: string]: string | Symbol | Object }

vue 提供的依赖,选项应该是一个对象或返回一个对象的函数,该对象包含可注入其子孙的 property

inject 选项应该是：

• 一个字符串数组，或
• 一个对象，对象的 key 是本地的绑定名，value 是：
  • 在可用注入内容中搜索用的 key (字符串或 Symbol)，或
  • 一个对象，该对象的：
    • from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
    • default property 是降级情况下使用的 value

// 父级组件 provide  'foo'
const Provider = {
  provide: {
    foo: 'bar'
  }
  // ...
}

// 子组件 inject  'foo'
const Child = {
  inject: ['foo'],
  created() {
    console.log(this.foo) // => "bar"
  }
  // ...
}