zoukankan      html  css  js  c++  java
  • 2021年5月10日

    时间:3个小时左右

    代码:120行左右

    博客:1

    知识点:vue的父组件向子子件传值

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
        <div>{{pmsg}}</div>
        <menu-item title='来自父组件的值'></menu-item>
        <menu-item :title='ptitle' content='hello'></menu-item>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          父组件向子组件传值-基本使用
        */
        Vue.component('menu-item', {
          props: ['title', 'content'],
          data: function() {
            return {
              msg: '子组件本身的数据'
            }
          },
          template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
        });
        var vm = new Vue({
          el: '#app',
          data: {
            pmsg: '父组件中内容',
            ptitle: '动态绑定属性'
          }
        });
      </script>
    </body>
    </html>

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
        <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
        <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          子组件向父组件传值-携带参数
        */
        
        Vue.component('menu-item', {
          props: ['parr'],
          template: `
            <div>
              <ul>
                <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
              </ul>
              <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
              <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
            </div>
          `
        });
        var vm = new Vue({
          el: '#app',
          data: {
            pmsg: '父组件中内容',
            parr: ['apple','orange','banana'],
            fontSize: 10
          },
          methods: {
            handle: function(val){
              // 扩大字体大小
              this.fontSize += val;
            }
          }
        });
      </script>
    </body>
    </html>
  • 相关阅读:
    【Thinkphp教程】URL路由功能解析
    MYSQL 错误#145解决方法
    【Thinkphp教程】空模块
    【Thinkphp教程】 如何进行模块分组
    mySQL中删除unique key的语法
    使用php让浏览器刷新
    Spring+Jpa整合的过程中遇到的一个问题。。。纠结了我半天。。。
    关于mule studio的应用
    解决eclipse和myeclipse不能编译项目的问题
    ajax fileupload上传组件的使用感悟
  • 原文地址:https://www.cnblogs.com/j-y-s/p/14903320.html
Copyright © 2011-2022 走看看