VUE3基础入门教程-组件篇-码农小朱

我们这个节课来学习父子组件的传值，这是一个基础代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
</head>
<script src="https://unpkg.com/vue@next"></script>
<body>
  <div id="app"></div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    template: `<div>{{message}}</div>`
  })
  const vm = app.mount("#app")
</script>
</html>

我们在代码上直接开凿，我们先来来声明一个组件 shop 表示商店

const Shop = {
     template: `<div>欢迎光临本小店，我是店员小美。</div>`
}

组件声明好之后我们需要来注册使用组件

const Shop = {
      template: `<div>欢迎光临本小店，我是店员小美。</div>`
  }
  const App = Vue.createApp({
    components: {
      Shop
    },
    data() {
      return {
        msg: 'hello world'
      }
    },

    template: `
      <div>{{msg}}</div>
      <Shop/>
    `
  })
  const vm = App.mount("#app")

那么商店里面的店员肯定不是固定的，他们可能需要轮班值守，这时候我们给shop组件进行传值指定值班店员。通过组件的props属性来进行参数声明clerk，然后的就可以在组件上通过clerk以属性的方式进行传至到组件内部，在组件内部把原来固定店员小美替换成clerk参数

const Shop = {
    props:['staff'],
    template: `<div>欢迎光临本小店，我是店员{{clerk}}。</div>`
}

  const App = Vue.createApp({
    components: {
      Shop
    },
    data() {
      return {
        msg: 'hello world'
      }
    },

    template: `
      <div>{{msg}}</div>
      <Shop staff="小红"/>
    `
  })
  const vm = App.mount("#app")

这样我们就实现了组件传值，用来指定来商店值班店员。

传递动态参数

组件传参，其实就相当于自定义了一个属性通过设置属性的值来把参数传入到组件内部，居然是个属性，我们是否可以使用v-bind来进行属性绑定呢，当然是可以的。

我们在父组件里面来声明一个变量staffName 用来指定店员的名字，然后通过v-bind绑定到Shop组件上，就像这样：

const App = Vue.createApp({
    components: {
      Shop
    },
    data() {
      return {
        staffName:'小明'
      }
    },

    template: `
      <Shop :clerk="staffName"/>
    `
  })
  const vm = App.mount("#app")

需要注意哦 v-bind 是可以简写:(冒号)的

我们在来添加一个按钮，通过按钮来修改变量staffName的值来实现动态切换。

const App = Vue.createApp({
    components: {
      Shop
    },
    data() {
      return {
        staffName:'小明'
      }
    },
    methods: {
      xiaohua(){
        this.staffName='小花'
      }
    },
    template: `
      <Shop :clerk="staffName"/>
      <button @click="xiaohua">小花</button>
    `
  })

当我们点击按钮小花的时候，就能点名小花上班了

同样的方式我们还可以改造一下弄出更多的按钮，通过给变量staffName赋值实现组件动态的传值

const App = Vue.createApp({
    components: {
      Shop
    },
    data() {
      return {
        staffName:'小明'
      }
    },
    methods: {
      xiaohua(name){
        this.staffName=name
      }
    },
    template: `
      <Shop :clerk="staffName"/>
      <button @click="xiaohua('小花')">小花</button>
      <button @click="xiaohua('小明')">小明</button>
      <button @click="xiaohua('小红')">小红</button>
      <button @click="xiaohua('小坤')">小坤</button>
    `
  })

好了，那么这节课我们就说到这，大家自己下去尝试一下。拜拜~~

视频讲解