Vue组件间通信简单总结(更新中)

原创

已于 2022-03-14 11:24:54 修改 · 置顶 · 290 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2020-09-17 22:19:11 首次发布

一、传值

1、父传子：通过props属性

特点：（单向数据流，且只读）

如果尝试直接修改，会报错如下图：
如需将该值当作初始值使用，后续需要修改则可以使用data或者computed属性进行修改，或者是利用watch监听变化修改。

当作初始值使用

静态/动态传递

父组件通过v-on添加一个自定义属性，将该属性传递给子组件，子组件通过props属性接收到该自定义属性
例子：
父组件：app.vue：

<template>
  <div id="app">
    <Test weather="晴天" :day="today" :time="time" :list="list"/>
  </div>
</template>

<script>
import Test from "./components/Test";
export default {
    
    
  name: 'app',
  components: {
    
    
    Test
  },
  data(){
    
    
    return{
    
    
      today: '星期四',
      time: '21:55',
      list: [{
    
    
               id: 1,
               age: '6'
              }, {
    
    
              id: 2,
              age: '7'
              },{
    
    
                id: 3,
                age: '8'
              }]
    }
  }
}
</script>

<style>
#app {
    
    
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}