Vue父组件给子组件传参数

  • 别人在调用我们写的组件时,虽然要实现的结构一样,但如果别人想改一下显示的内容或者之类的,该怎么做呢;
  • 这时候就要提到“传参数”这个词了,别人可以通过传不同的参数,来实现他们具体的结构;

传参之前的代码:


    

结果:

调用了组件两次,但是因为组件是固定的,所以里面的内容显示的都是“nav”,那如果想显示不同的内容呢,就要“传参数”了;

传参之后的代码:


    

结果:

  • 父组件把一个字符串传过去了,把一个布尔值传过去了; 
  • 这个属性是放在子组件里面的,在调用的时候父组件传给子组件一个属性,然后子组件接收,使用。在代码中属性是:myname、myright;
  • 后面的参数写的是属性值,调用者根据自己想显示的内容,在这里规定;
  • 然后子组件接收这个属性,在props里,接收格式为:
  • 将属性放在对象里接收,每个属性也是一个对象形式,每个属性里面要进行“属性验证”:type:类型值,也就是说明这个属性值的数据类型;还要设置默认值default
  • 进行数据验证的好处是:如果调用的时候属性值不小心写错类型了,或者用错了,比如我们想传一个布尔类型的,但是我们写成字符串类型的了,进行数据验证的话,如果我们调用写的属性值类型和下面属性定义的类型不一致,就会报错,如果没加数据验证,是不会报错的;
  • 加默认值的好处是:如果有些属性不想加,可以设置默认值,不设置的话默认就会是undefined;
  • 当然也可以不用设置默认值和数据验证,就接收属性,想下面这样用数组接收:
  • props:["myname,myright"]
  • 但是最完整的属性定义还是:不仅接收属性,还对属性进行校验,传一个对象过去, 还设置默认值; 
  • 这就是父传子;父组件传一个属性给子组件,子组件接收,使用;
  • 调用组件,传的参数不一样,结果也会不一样;
  • 这个属性名不是固定的,可以自己起,但是要保证子组件接收和使用的时候要跟属性名保持一致;
  • 看组件是谁的孩子,就把该组件放在谁的模板里去用;

有一点需要注意:

myright属性是控制右边那个按钮显示不显示的; 

看上面这个代码发现,myright前面加了“:”,原因是不加的话,后面双引号引起来的就是字符串,但是其实我们想传的是布尔值,所以要在前面加上“:”; 

加了“:”那等号后面就是js的代码,动态绑定,就传的是布尔值;不加的话就是直接当字符串用了;

只要在父组件里的div里,子组件是可以用父组件的状态:

  • 凡是放在
    里面,定义子组件里是访问不了的。

Vue父组件给子组件传参数_第1张图片

子组件可以更改父组件的状态值吗:

  • 父组件传给子组件的状态,子组件可以重新给它赋值,但是不要去修改,会造成数据流紊乱。
  • 父组件传给子组件的属性,只有父组件可以重新传,但不允许子组件随意修改。
  • 每个组件内部的状态,可以随意修改;

案例二:父传子loop属性,在标签上指定loop的值:

父组件:

子组件:接收这个loop属性,并使用:

export default {
//接收loop属性
  props: {
    loop: {
      typeof: Boolean,
      default: true
    }
  },
  mounted () {
    new Swiper('.swiper', {
    // 循环模式选项
    loop: this.loop, //使用是this.loop
      
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      }
    })
  }
}

使用父组件传来的属性当做变量值是:this.loop

你可能感兴趣的:(web前端开发,vue.js,javascript,前端,前端框架,ecmascript)