Vue父子组件之间传递数据

怼烎@ 2023-09-28 11:59 185阅读 0赞

父向子:v-bind()+props

父组件绑定属性向子组件传递数据,子组件通过props进行数据的接收。

父组件代码如下:

  1. <template>
  2. <div id="app">
  3. <child :num="size"></child>
  4. </div>
  5. </template>
  6. <script>
  7. //引入组件
  8. import child from '@/zhao/data'
  9. export default{
  10. name:'app',
  11. data(){
  12. return{
  13. size:22,
  14. }
  15. },
  16. //注册组件
  17. components:{
  18. child,
  19. }
  20. }
  21. </script>

子组件接收和使用数据:

  1. <template>
  2. <div id="father">
  3. <!-- 使用数据 -->
  4. {
  5. { num }}
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. name:'father',
  11. data(){
  12. return{
  13. }
  14. },
  15. // 接收数据
  16. props: ['num'],
  17. }
  18. </script>

子向父:自定义事件 $emit

子组件部分代码:

  1. <template>
  2. <div id = "login">
  3. <label>
  4. <p用户名:{
  5. {user}}</p>
  6. <input v-model="username" @change="setUser"/>
  7. </label>
  8. </div>
  9. </template>
  10. <script>
  11. export default {
  12. name:'login',
  13. data(){
  14. return{
  15. username:'',
  16. }
  17. },
  18. methods:{
  19. setUser:function(){
  20. this.$emit('transferUser',this.username)
  21. }
  22. },
  23. components:{
  24. LoginDiv,
  25. },
  26. }
  27. </script>

父组件部分代码:

  1. <template>
  2. <div id = "app">
  3. <LoginDiv @transferUser="getUser"></LoginDiv>
  4. <p用户名:{
  5. {user}}</p>
  6. </div>
  7. </template>
  8. <script>
  9. //引入组件
  10. import LoginDiv from '@/zhao/login'
  11. export default {
  12. name:'app',
  13. data(){
  14. return{
  15. user:'',
  16. }
  17. },
  18. methods:{
  19. getUser(msg){
  20. this.user = msg
  21. }
  22. },
  23. components:{
  24. LoginDiv,
  25. },
  26. }
  27. </script>

总结:

(1)子组件传递数据:

  1. this.$emit('自定义事件名', '要传递的数据')

(2)父组件接收数据:

  1. <子组件名 @自定义事件名="方法名"/>
  2. //.....
  3. methods: {
  4. 方法名(val) {
  5. // val 是子组件传递过来的数据
  6. // 、、、
  7. }
  8. }

父子双向:v-model + this.$emit()

父组件部分代码:

  1. <template>
  2. <div class="home">
  3. <h1>Home 组件- - -{
  4. { count }}</h1>
  5. <button @click="count+=1">点击按钮, 数量 +1(父组件)</button>
  6. <Test v-model:num="count"/>
  7. </div>
  8. </template>
  9. <script>
  10. import Test from './components/Test'
  11. export default {
  12. name: 'Home',
  13. components: {
  14. Test,
  15. },
  16. data() {
  17. return {
  18. count: 1
  19. }
  20. },
  21. }
  22. </script>

子组件部分代码:

  1. <template>
  2. <div>
  3. <h1>Test 组件- - -{
  4. { num }}</h1>
  5. <button @click="add">点击按钮 数量 +1(子组件)</button>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. name: 'Test',
  11. props: ['num'],
  12. emits: ['update:num'], // 这行可写可不写,写了是方便统计emit方法,这里定义了的方法,后面this.$emit才能触发
  13. methods: {
  14. add() {
  15. this.$emit('update:num', this.num + 1)
  16. }
  17. }
  18. }
  19. </script>
  20. <style>
  21. </style>

总结:

(1)父组件核心代码

  1. <子组件名 v-model:属性名="属性值"/>

(2)子组件核心代码

  1. <template>
  2. <div>
  3. <!-- 使用数据 -->
  4. {
  5. { 属性名 }}
  6. <button @click="方法名">点击进行操作</button>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. // 接收数据
  12. props: ['属性名'],
  13. emits: ['update:属性名'], // 这行可写可不写,写了是方便统计emit方法,写了的话,这里定义了的方法,后面this.$emit才能触发
  14. methods: {
  15. 方法名() {
  16. this.$emit('update:属性名', 属性值操作)
  17. }
  18. }
  19. }
  20. </script>

发表评论

表情:
评论列表 (有 0 条评论,185人围观)

还没有评论,来说两句吧...

相关阅读