Vue 父子传值

本文已参与 「新人创作礼」活动, 一起开启掘金创作之路。

13- vue组件-用scoped实现组件的私有样式

1. 在 style 上加入 scoped 属性, 就会在此组件的标签上加上一个随机生成的 data-v 开头的属性
2. 而且必须是当前组件的元素或者子组件的根元素, 才会有这个自定义属性

13- vue 组件 -/deep/ 深度作用选择符

1. 只存在于 vue 的写法, css 不通用
2. 父组件中控制子组件元素或类名，覆盖样式 =》需要在前边加上 /deep/

13- vue 创建组件

1. 按需导入: 1. 在父组件中引入(import MiCang from './MeCang/MiCang.vue'); 2. 在 components 中定义;

  components: {
    MiCang
  },

 3. 在 template 里面直接使用 <MiCang></MiCang> 当然单标签, 双标签都是可以的

13- vue 组件的父传子的方式传值

1. 在父组件中定义的子标签当中传值: :fion="list" (键是子组件需要接收的, 值就是在父组件取的, 然后需要传到子组件的值)
2. 在子组件当中接收: props:['list'] 与 data 是同级的, 然后在 template 里面直接使用, 在 script 里需要加 this 使用
3. 子组件不能修改接收到的父元组件的数据, 单项数据流无法溯源, 因为如果都要修改的话不好维护。修改简单数据类型可以修改会报错, 修改引用数据类型会无法溯源.

13- vue 组件的子传父的方式传值

1. 首先在子组件定义一个事件, 在事件里使用 this.$emit('自定义的事件名', 需要传的数据, 值)
2. 在父组件里的子组件标签定义定义子组件传过来的事件名 @自定义事件名="fn"
3. 在

  methods: {
    自定义事件名(参数接收) {
      console.log(this.username);
    }
  }