zoukankan      html  css  js  c++  java
  • 03.组件-父组件向子组件传值

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      <div id="app">
        <!-- 父组件,可以在引用子组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用 -->
        <com1 v-bind:parentmsg="msg"></com1>
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123 啊-父组件中的数据'
          },
          methods: {},
    
          components: {
            // 结论:经过演示,发现,子组件中,默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
            com1: {
              data() { // 注意: 子组件中的 data 数据,并不是通过 父组件传递过来的,而是子组件自身私有的,比如: 子组件通过 Ajax ,请求回来的数据,都可以放到 data 身上;
                // data 上的数据,都是可读可写的;
                return {
                  title: '123',
                  content: 'qqq'
                }
              },
              template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>',
              // 注意: 组件中的 所有 props 中的数据,都是通过 父组件传递给子组件的
              // props 中的数据,都是只读的,无法重新赋值
              props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性,先在 props 数组中,定义一下,这样,才能使用这个数据
              directives: {},
              filters: {},
              components: {},
              methods: {
                change() {
                  this.parentmsg = '被修改了'
                }
              }
            }
          }
        });
      </script>
    </body>
    
    </html>
  • 相关阅读:
    阿里云部署SSL证书详解
    PHP网站从Apache转移到Nginx后产生404错误的原因和解决办法
    APACHE服务器出现No input file specified.的完美解决方案
    Lnmp修改php.ini配置
    CGI,FASTCGI,PHPFPM的区别
    CLR Via CSharp读书笔记(25):线程基础
    Java Network Programming FAQ.
    SchemaFree MySQL vs NoSQL
    ERROR: JDWP Unable to get JNI 1.2 environment
    Firebug Internals
  • 原文地址:https://www.cnblogs.com/hanotao/p/10897498.html
Copyright © 2011-2022 走看看