组件传值动态

最新推荐文章于 2022-12-19 16:37:29 发布

Silent Land

最新推荐文章于 2022-12-19 16:37:29 发布

阅读量555

点赞数

分类专栏： # Vue2 experience

本文链接：https://blog.csdn.net/weixin_44757417/article/details/110356774

版权

Vue2 同时被 2 个专栏收录

36 篇文章 3 订阅

订阅专栏

experience

29 篇文章 0 订阅

订阅专栏

组件父子传值

单向数据流:父组件的给子组件传参之后子组件不能修改父组件中的数据发生改变会影响到子组件

需求：

1.在子组件中修改msg
2.子组件中修改之后不会影响到父组件
3.父组件中修改之后会影响到子组件

解决方案

将msg保存期起来，改变保存的那个属性，这样需求1和需求2就完成了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app" class="f">
    <h2>父组件</h2>
    <div>msg:{{msg}}</div>
    <son :msg="msg"></son>
  </div>
</body>
<script src="./vue.js"></script>
<script>

  Vue.component('son',{
    template:`<div class="s">
      <h3>我是子组件</h3>
      <div>msg：{{mymsg}}</div>
      <input type="text" v-model="mymsg">
      </div>
      `,
      props:['msg'],
      data(){
        return {
          mymsg:this.msg
        }
      }
  })
new Vue({
  el:'#app',
  data:{
    msg:'father'
  }
})
</script>
</html>

在这里插入图片描述

问题：父组件的值改变子组件没改变
原因：只是把msg最初的值赋值给了mymsg,而msg时变化的
解决：
- msg每次改变之后都会传到子组件，可以通过watch来监听msg的改变，每次改变将新的值赋给mymsg

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app" class="f">
    <h2>父组件</h2>
    <div>msg:{{msg}}</div>
    <input type="text" v-model="msg">
    <son :msg="msg"></son>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  Vue.component('son',{
    template:`<div class="s">
      <h3>我是子组件</h3>
      <div>msg：{{mymsg}}</div>
      <input type="text" v-model="mymsg">
      </div>
      `,
      props:['msg'],
      data(){
        return {
          mymsg:this.msg
        }
      },
      watch: {
        msg(){
          this.mymsg = this.msg
        }
      },
  })
new Vue({
  el:'#app',
  data:{
    msg:'father'
  }
})
</script>
</html>

在这里插入图片描述

Silent Land

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
组件传值动态

组件父子传值单向数据流:父组件的给子组件传参之后子组件不能修改父组件中的数据发生改变会影响到子组件需求：1.在子组件中修改msg2.子组件中修改之后不会影响到父组件3.父组件中修改之后会影响到子组件解决方案将msg保存期起来，改变保存的那个属性，这样需求1和需求2就完成了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="
复制链接

扫一扫