话不多说直接上代码，看代码解释
父组件
1.<template> <div id="father"> <h2>这是myfather组件</h2> <!-- 通过props实现父组件给子组件传递数据 --> <!-- 通过自定义属性传递数据，静态传递，动态传递都可以 --> <my-son uname="符鼠" :uage="age"></my-son> <!-- 子组件向父组件传递 v-on接收子组件的数据 --> <my-son @hobby="fn"></my-son> <h3>接受子组件的值{{ msg }}</h3> <my-son :msgs.sync="hobby"></my-son> <h3>接受子组件的值{{ hobby }}</h3> </div> </template> <script> // 导入子组件 import MySon from "./MySon"; export default { components: { MySon, }, data() { return { age: 22, msg: "", hobby:'' }; }, methods: { fn(v) { this.msg = v; }, }, }; </script>
子组件
<template> <div> <h2>这是mySon组件</h2> <h4>姓名{{uname}}</h4> <h4>年龄{{uage}}</h4> <!-- 子传父 --> <button @click="biu">emit传递数据</button> <button @click="fashe">.sycn传递数据</button> </div> </template> <script> export default { // props父传子，子组件这边做限定 props:{ uname:String, uage:Number //对象或数组要这样写 //titles:{ // type:array, // default(){ // return [] // } // } }, methods: { // 定义方法 biu(){//子传父 // 发射事件，携带的数据 this.$emit('hobby','$emit发送过来的') }, fashe(){ // 子组件触发事件 // .sync:将时间名换成update:hobby // update是固定写法 // hobby要修改状态的名称,可以不和传入的状态名字最对应 // <my-son :msgs.sync="hobby"></my-son> // 但要注意：必须在事件名称上加上update前缀 this.$emit('update:msgs','我是来自。sycn修改的值') } }, } </script>
最后注意：
Vue中的 data 必须是个函数，因为当 data是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据才不会相互干扰，
