vue父子组件、兄弟组件传值

父组件往子组件传值

<!-- 父组件 -->
<template>
    <app-child :userName="name"></app-child>
</template>
<script>
    // 引入子组件
    import child from './child.vue'
    export default {
        data() {
            return {
                name: 'cxk'
            }
        },
        // 注册子组件
        components: {
            'app-child': child
        }
    }
</script>

<!-- 子组件 -->
<template>
    <div>{{ userName }}</div>
</template>
<script>
    export default {
        // 接收
        props: ['userName']
        // or
		props: {
		    userName: {
		        type: String, //可指定接收类型，如:Array.
		        default:"this is default" //可设置默认值
		    }
		}
		// or
		props: {
		    userName: {
		        type: Array,
		        default: ['foo','bar','baz']   //默认值
		    }
		}
    }
</script>

父组件：:message=“msg” 向子组件发送
子组件：props:[‘message’] 接收
注意：若父组件中没有用v-bind，子组件中接收的是mes字符串，

其中props对象写法中可以定义属性 ：
type. default required 三个属性

props:{
	message:{
		type:Number/String/Array......   //定义接收值的类型
		default:0       //定义默认值 
		required:true/false //定义必填项，不填将报错，那怕有默认值也报错
	｝
｝

子组件往父组件传值

<!-- 父组件 -->
<template>
    <child @nName="getName"></child>
</template>
<script>
    import child from './child'
    export default {
        // 注册子组件
        components: {
            child
        },
        data() {
            return {
                userName: ''
            }
        },
        methods: {
            getName(name) {
            	//接收子组件传的值
                this.userName = name
            }
        }
    }
</script>

<!-- 子组件 -->
<template>
    <div>
        <button @click="changeName">把值传给父，通过$emit</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            changeName() {
                this.$emit('nName', 'xiaoming')
            }
        }
    }
</script>

兄弟组件传值

main.js中注册一个新的Vue实例

<!-- main.js中注册一个新的Vue实例 -->
export const enevtVue = new Vue()

子组件1

<!-- 这个子组件去改变另一个兄弟子组件 -->
<template>
    <div>
        <button @click="changeAge">改变兄弟的值</button>
    </div>
</template>
<script>
    import { enevtVue } from './main.js'
    export default {
        data() {
            return {
                age: '10'
            }
        },
        methods: {
            changeAge() {
                this.age = 20
                // 全局触发自定义事件
                enevtVue.$emit("editAge", this.age) 
            }
        }
    }
</script>

子组件2

<!-- 通过$on绑定上自定义事件 -->
<template>
    <div>{{ age }}</div>
</template>
<script>
    import { enevtVue } from './main.js'
    export default {
        data() {
            return {
                age: 10
            }
        },
        created() {
            enevtVue.$on('editAge', (age) => {
                this.age = age
            }) // 绑定自定义事件
        }
    }
</script>

注意：如果 $on 多次触发，解决办法就是在 beforeDestroy 或 destroy 中将事件销毁，使用 $off()。

beforeDestroy () {
	enevtVue.$off('editAge')
},

例子：

一个简单的待办事项列表组件。
组件设计：

• 功能：显示待办事项列表并提供添加、删除和完成待办事项的操作。
• Props：传入待办事项数组，每个待办事项包含id、标题和状态。
• Events：触发添加、删除和完成待办事项的事件。

在单文件子组件（TodoList.vue）中定义组件：

<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.title }} - {{ todo.status }}
        <button @click="complete(todo.id)">完成</button>
        <button @click="remove(todo.id)">删除</button>
      </li>
    </ul>
    <div>
      <input v-model="newTodo" placeholder="输入新的待办事项">
      <button @click="add">添加</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    todos: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      newTodo: ''
    }
  },
  methods: {
    add() {
      if (this.newTodo) {
        this.$emit('add', this.newTodo);
        this.newTodo = '';
      }
    },
    remove(id) {
      this.$emit('remove', id);
    },
    complete(id) {
      this.$emit('complete', id);
    }
  }
}
</script>

在父组件中引入并使用TodoList组件：

<template>
  <div>
    <h1>待办事项列表</h1>
    <todo-list :todos="todos" @add="addTodo" @remove="removeTodo" @complete="completeTodo"></todo-list>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue';

export default {
  components: {
    TodoList
  },
  data() {
    return {
      todos: [
        { id: 1, title: '学习Vue', status: '未完成' },
        { id: 2, title: '编写示例', status: '未完成' }
      ]
    }
  },
  methods: {
    addTodo(newTodo) {
      const id = this.todos.length + 1;
      this.todos.push({ id, title: newTodo, status: '未完成' });
    },
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id);
    },
    completeTodo(id) {
      this.todos = this.todos.map(todo => {
        if (todo.id === id) {
          return { ...todo, status: '已完成' };
        } else {
          return todo;
        }
      });
    }
  }
}
</script>

在这个例子中，设计了一个TodoList组件，它接收一个待办事项数组作为Props，并触发添加、删除和完成待办事项的事件。在父组件中使用TodoList组件，并通过Props绑定待办事项数组和监听事件来实现功能。