vue笔记-16（组件-父子组件数据和方法传递）

  • 父组件向子组件传值
    1. 子组件中，默认无法访问到父组件中的data上的数据和methods中的方法
    2. 父组件可以在引用子组件的时候，通过属性绑定 (v-bind:)的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部供子组件使用
    3. 把父组件传递过来的parentmsg属性，先在props数组中，定义一下，这样才能在子组件中使用这个数据
    4. 组件中的所有Props中的数据，都是通过父组件传递给子组件的
    5. 子组件中的data数据，不是通过父组件中传递过来的，而是子组件自身私有的，比如子组件通过Api接口请求回来的数据，都可以放到data身上
    6. 子组件中的data数据是可读可写的，而props中的数据是只读的。（可以修改，但是不推荐修改）
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>父组件向子组件传值</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
      <!-- 注意这里的变量名称parentmsg大小写不区分，props里统一使用小写 -->
      <mycom1 v-bind:parentmsg="msg"></mycom1>
  </div>

  <template id="com1">
      <div>
          <h3> 我是子组件 </h3>
          <h2>从父组件获取到的数据 {{ parentmsg }}</h2>
          <h2>从子组件获取到的数据 {{ name }} : {{ childmsg }}</h2>
      </div>
  </template>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
              msg: '我是父组件的数据'
          },
          components: {
              mycom1: {
                  template: '#com1',
                  data: function(){
                      return { 
                          name: "zhangsan", 
                          childmsg: "nihao"
                      }
                  },
                  props: ['parentmsg'] //子组件模板中引用的从父组件里获取的变量，必须在props数组中定义变量名称
              }
          }
      })
  </script>
</body>
</html>
  • 父组件把方法传递给子组件
    1. 父组件向子组件传递方法，使用的是事件绑定机制：v-on:或者@。当我们自定义了一个事件属性之后，子组件就能够通过某些方式来调用传递进去的这个方法了
    2. 当点击子组件的按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法？使用this.$emit('func')。如果有参数，直接拼接在触发方法后，如：this.$emit('func', arg1, arg2...)
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>父组件向子组件传值</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
      <mycom1 v-on:childshow="show"></mycom1>
  </div>

  <template id="com1">
      <div>
          <input type="button" value="调用父组件的方法" @click="myclick">
      </div>
  </template>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
              msg: '我是父组件的数据'
          },
          methods:{
              show(){
                  console.log("我是父组件中的方法")
              }
          },
          components: {
              mycom1: {
                  template: '#com1',
                  methods:{
                      myclick(){
                          this.$emit('childshow')
                      }
                  }
              }
          }
      })
  </script>
</body>
</html>
  • 使用ref获取DOM元素和组件的引用
    1. ref 是英文单词refrence的缩写
    2. 在元素上添加ref属性， 譬如：ref="myh3"
    3. 在VM中使用DOM：this.$refs.myh3.innerText
    4. 同样也可以将ref属性放到component组件元素上，这样就可以直接调用组件的方法和属性
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用refer获取dom</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
      <input type="button" value="点击获取文本" @click="show_log">
      <h3 ref="myh3">我是一个普通文本</h3>
  </div>

  <script>
      var vm = new Vue({
          el :"#app",
          methods:{
              show_log(){
                  console.log(this.$refs.myh3.innerText)
              }
          }
      })
  </script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。