Vue(父传子PropsDown)

最新推荐文章于 2024-03-25 13:01:07 发布

Congnandaobei

最新推荐文章于 2024-03-25 13:01:07 发布

阅读量539

点赞数

分类专栏： VUE 文章标签： Vue(父传子PropsDown)

本文链接：https://blog.csdn.net/congnandaobei/article/details/93128402

版权

VUE 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>04-组件通信-父传子-PropsDown</title>
  <style>
    .com-a {
      padding: 5px;
      border: 1px solid #000;
    }
  </style>
  <!--  -->
</head>

<body>
  <div id="app">
    <h1>04-组件通信-父传子-PropsDown</h1>
    <!-- 2. 在使用组件的时候通过标签属性传递组件参数 -->
    <!-- <com-a message="hello"></com-a> -->
    <!--v-bind动态绑定数据-->
    <com-a
      v-bind:message="message"
      :count="appCount"
    ></com-a>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    //我就是子元素,我来接收父元素的数据
    Vue.component('com-a', {
      // 1. 声明参数
      // props 数据可以像 data 数据一样直接访问使用
      // props 是单向数据流
      //    父组件数据的改变会影响 props
      //    反之不会
      //    这种修改是无意义的，危险的
      //    这样设计的主要原因是避免在其他组件修改当前组件的数据状态，防止数据操作的混乱
      //    设计思想：数据状态修改仅在当前组件内部完成
      // 什么原因你想要修改呢？
      //   1. 你不希望 props 数据被父组件影响了
      //   2. 你想把父组件传下来的数据处理成其他格式去输出
      //用这个接收父元素的数据
      props: ['message', 'count'],
      template: `
        <div class="com-a">
          <p>com-a 组件</p>
          <p>{{ message }}</p>
          <p>count {{ count }}</p>
          <p>localCount {{ localCount }}</p>
          <button @click="count += 1">点击修改 Props 数据</button>
        </div>
      `,
      data () {
        return {
          // 我们可以把 props 数据初始备份到本地的 data 数据中
          // 这句话就相当于 this.localCount = this.count
          // 然后你的 this.localCount 不会受任何影响了
          // 就好比：
          //  var a = 1
          //  var b = a
          //  b = 123
          //  a 和 b 没有任何关系，修改a或者b都不会影响对方
          //就是把vue实例的数据拿过来，在定义一个新的数据显示在页面，这样我就和子元素得到的没有关系
          //子元素还是受父元素的影响，但是我不会，我是独立的数据，我和子元素一样还是不会影响父元素
          localCount: this.count
        }
      }
    })
//Vue实例就是父元素
    const app = new Vue({
      el: '#app',
      data: {
        message: 'app message',
        appCount: 0
      },
      methods: {
      }
    })
  </script>
</body>

</html>

Congnandaobei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(父传子PropsDown)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>04-组件通信-父传子-PropsDown</title> <style> .com-a { padding: 5px; bord...
复制链接

扫一扫