vue Jsタグを導入することによりHTML上のコンポーネントの書き方、親子コンポーネントのデータ転送

20410 ワード
vue
概要
このページは直接コピーして実行できます.以下のアプリケーションが含まれています.
  • Vue slotスロット使用
  • Vue v-modelは
    • を使用します.
  • Vue propsは
    • を使用します.
  • 親子コンポーネントデータ転送
  • element-uiは
    • を使用します.
  • HTML方式でサブアセンブリを登録し、サブアセンブリデータを一つのjsファイルに書き込み、ラベルで導入し、サブアセンブリオブジェクトをcomponentsに
    • に入れることができる.
    Live Demoオンラインの例
    Liveデモ
    ヒントHTMLモードでプロジェクトを開発することを提案しないで、vue-cli3を使ってプロジェクトを作成することを提案して、単一ファイルのコンポーネントのモードを使ってVue cli 3を開発します.
    コード
    
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Titletitle>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js">script>
  <script src="https://cdn.bootcss.com/element-ui/2.10.1/index.js">script>
  <link href="https://cdn.bootcss.com/element-ui/2.10.1/theme-chalk/index.css" rel="stylesheet">
  <style>
    #app{
      display: flex;
      justify-content: space-between;
    }
    .parent, .child{
      width: 45%;
    }
    .el-card{
      height: 100%;
    }
  style>
head>
<body>
<div id="app">
  <div class="parent">
    <el-card>
      <div slot="header">
        <span>   span>
      div>
      <el-input v-model="ParentMsg">el-input>
      <el-button type="primary" @click="changeChild" style="margin-top: 30px">      msgel-button>
    el-card>

  div>
  <div class="child">
    <el-card>
      <div slot="header">
        <span>   span>
      div>
      <child1 v-show="display" :parent-msg="childMsg">child1>
      <child2 @change-data-from-child="changeParent">child2>
    el-card>
  div>
div>
<script>
  new Vue({
    el: '#app',
    data(){
      return {
        display:true,
        ParentMsg:"Hello This is Parent",
        childMsg: 'Hello,          '
      }
    },
    methods: {
      changeParent(data){
        this.ParentMsg = data
      },
      changeChild(){
        this.childMsg = '        '
      }
    },
    components: {
      'child1': {
        props: { //      prop，             
          parentMsg: {
            type: String,
            default: ''
          }
        },
        template: '

    ' +
            '        
    {{msg}}

    '     +
            '        
    {{parentMsg}}

    '     +
            '             1        
    '     +
            '    
    '    ,

        data() {//Vue component data    function() return
          return {
            msg: 'This is a Child Component1!',
            msgDisplay: true
          }
        },
        methods: {
          toggleMsgDisplay() {
            this.msgDisplay = !this.msgDisplay
          }
        }
      },
      'child2':{
        template:"     2  ,         ",
        data () {
          return {
            msg:"      2  "
          }
        },
        methods:{
          changeParentData () {
            this.$emit('change-data-from-child', '       2') //     kebab-case  
          }
        }
      }
    },
  })
    script>

body>
html>
    Debianではroot権限がありません.Pythonを使ってOracleにアクセスします.
    Centosのrootユーザー、スコマンド、sudo、ソース、virtual box強化など