zoukankan      html  css  js  c++  java
  • Vue学习笔记【25】——Vue组件(组件间传值)

    父组件向子组件传值

    1. 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据

     <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '这是父组件中的消息'
          },
          components: {
            son: {
              template: '<h1>这是子组件 --- {{finfo}}</h1>',
              props: ['finfo']
            }
          }
        });
      </script>
     
    1. 使用v-bind或简化指令,将数据传递到子组件中:

     <div id="app">
        <son :finfo="msg"></son>
      </div>

    子组件向父组件传值

    1. 原理:父组件将方法的引用,传递到子组件内部,子组件在内部调用父组件传递过来的方法,同时把要发送给父组件的数据,在调用方法的时候当作参数传递进去;

    2. 父组件将方法的引用传递给子组件,其中,getMsg是父组件中methods中定义的方法名称,func是子组件调用传递过来方法时候的方法名称

     <son @func="getMsg"></son>
     
    1. 子组件内部通过this.$emit('方法名', 要传递的数据)方式,来调用父组件中的方法,同时把数据传递给父组件使用

     <div id="app">
        <!-- 引用父组件 -->
        <son @func="getMsg"></son>
     
        <!-- 组件模板定义 -->
        <script type="x-template" id="son">
          <div>
            <input type="button" value="向父组件传值" @click="sendMsg" />
          </div>
        </script>
      </div>
     
      <script>
        // 子组件的定义方式
        Vue.component('son', {
          template: '#son', // 组件模板Id
          methods: {
            sendMsg() { // 按钮的点击事件
              this.$emit('func', 'OK'); // 调用父组件传递过来的方法,同时把数据传递出去
            }
          }
        });
     
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {
            getMsg(val){ // 子组件中,通过 this.$emit() 实际调用的方法,在此进行定义
              alert(val);
            }
          }
        });
      </script>
     

    使用 this.$refs 来获取DOM元素和组件引用

       <div id="app">
        <div>
          <input type="button" value="获取元素内容" @click="getElement" />
          <!-- 使用 ref 获取元素 -->
          <h1 ref="myh1">这是一个大大的H1</h1>
     
          <hr>
          <!-- 使用 ref 获取子组件 -->
          <my-com ref="mycom"></my-com>
        </div>
      </div>
     
      <script>
        Vue.component('my-com', {
          template: '<h5>这是一个子组件</h5>',
          data() {
            return {
              name: '子组件'
            }
          }
        });
     
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {
            getElement() {
              // 通过 this.$refs 来获取元素
              console.log(this.$refs.myh1.innerText);
              // 通过 this.$refs 来获取组件
              console.log(this.$refs.mycom.name);
            }
          }
        });
      </script>
  • 相关阅读:
    Windows 2008 R2 远程桌面服务(八)远程桌面服务器安全设置
    从硬盘上安装SQLServer2005的问题
    在 Windows server 2008 下计划任务无法正常执行bat批处理文件
    两部搞定windows server 2008 R2 中IE8的增强安全配置功能
    Microsoft SQL Server 2005 Service Pack 4 RTM
    学习地址
    Windows 2008 远程桌面如何设置两个用户共享一个会话
    Windows Server 2008 启用无线网卡
    远程桌面连接指定会话(Session)
    固定宽度弹性布局(以适应各种各辨率)
  • 原文地址:https://www.cnblogs.com/superjishere/p/11953060.html
Copyright © 2011-2022 走看看