Vue组件通信

更多文章看查看专栏

几种实现思路

  • 参数传递
  • 全局共享
    • 浏览器的存储
    • Vuex

父组件到子组件

传递方式：

为子组件定义props属性

父组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld v-bind:username="username"/>
    <HelloWorld v-bind:username="'123'"/>
    <!-- 使用局部组件 -->

  </div>
</template>

<script>
// 引入Vue


// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
// 创建局部组件

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data() {
    return {
      username: 'ABC'
    }
  }
}
</script>

子组件

<template>
  <div class="hello">
    <h1>组件通信</h1>
    <p>用户名：{{username}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['username'],
  data() {
    return {
      price: 35
    }
  },
  methods: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.text-danger {
  color: #f00
}
.panel {
  background-color: rgba(151, 177, 231, 0.918);
  padding: 50px;
  p {
    background-color: #fff;
    padding: 20px;
  }
}
</style>

Vue组件通信_前端

添加数据类型验证

name: {
	type: String,
	required: true
}

设置默认值

name: {
	type: String,
	default："**"
}

<template>
  <div class="hello">
    <h1>组件通信</h1>
    <p>用户名：{{username}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    username: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      price: 35
    }
  },
  methods: {

  }
}
</script>

type所支持的类型

String：字符串

Number: 数字

Boolean: 布尔值

Array: 数组

Object: 对象

Date: 日期

Function: 方法/函数

Symbol

子组件到父组件

在子组件触发自定义事件

this.$emit('myEvent')

在父组件监听事件

<my-component v-on:myEvent="doSomething"></my-component>

子组件

<template>
  <div class="hello">
    <h1>组件通信</h1>
    <p>用户名：{{username}}</p>
    <input type="text" v-model="name">
    <input type="button" @click="submit" value="提交">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    username: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      name: ''
    }
  },
  methods: {
    submit() {
      this.$emit('myEvent',this.name)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.text-danger {
  color: #f00
}
.panel {
  background-color: rgba(151, 177, 231, 0.918);
  padding: 50px;
  p {
    background-color: #fff;
    padding: 20px;
  }
}
</style>

父组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld v-bind:username="username"/>
    <HelloWorld @myEvent="dealEvent"/>
    <!-- 使用局部组件 -->

  </div>
</template>

<script>
// 引入Vue


// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
// 创建局部组件

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data() {
    return {
      username: 'ABC'
    }
  },
  methods: {
    dealEvent(data) {
      console.log(data)
    }
  }
}
</script>

Vue组件通信_用户名_02