try:vue 3.x with component

vue 3 初體驗

by cactus77kiki

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="vcontainer">  
<!---->
  <custom-comp-1 title="This is test!" :pricedata="prc" :quantitydata="qty"
  :getresult="getComponentValue" :getmoney="getTotalValue" 
  :testfunc1="null" :testfunc2 = "null"></custom-comp-1>
  <h3>
  Instance Data
  </h3>
  {{msg}}<br/>
  <!--1.v-model.trim看來只適用於string類型,
      2.數值型別建議皆要加上.number,若輸入空白字元會被自動忽略-->
  price：<input type="text" v-model.number="prc" readonly style="width:60px;"/>
  quantity:<input type="text" v-model.number="qty" style="width:60px;"/>
</div>

CSS

/*
ref1: https://blog.logrocket.com/definitive-guide-vue-3-components/  (simple example)
ref2: https://vuejs.org/guide/components/props.html#prop-passing-details  (officual guide)
ref3: https://book.vue.tw/CH2/2-2-communications.html  (vue 3 tutorial)
*/

JavaScript

/*component*/
const RootComponent = {		
				props:{
    			title: {type:String},
          pricedata: {type:Number},
          quantitydata: {type:Number},
    			getresult: {type:Function},
          getmoney: {type:Function},
          testfunc1: {type:Function},
          testfunc2: {type:Function},
  			},
        data() {
        	return {
          	greeting: "Hello",
            name: "John",
            //price: this.pricedata,	//v2.x的寫法不適用於此
            //quantity: this.quantitydata,
          }
        },
        methods:{
        	calculation(){
          	let value = this.pricedata*100;
          	this.getresult(value);
          },
          calculatemoney(){
          	let value = this.pricedata* this.quantitydata;
            this.getmoney(value);
            //this.getmoney(110);
          },
          test1(){
          	let value = 100*1.05;
          	this.testfunc1(value);
          },
          test2(){
          	let value = 500*1.05;
            this.testfunc2(value);
          },
        },
        template:
        `<h3>{{title}}</h3>
         <div>{{greeting}},{{name}}</div>
         <button v-on:click="calculation">Click!</button><br/>
         <button v-on:click="calculatemoney">Get Result!</button>
        `
    };
/*instance*/
const vapp = Vue.createApp({			
      data() {
        return {
          msg: 'test',
          prc: 3,
          qty: 1,
        }
      },
      methods:{   
      	getComponentValue(param){
        	console.log(param);
        },
        getTotalValue(param){
        	console.log(param);
        },
      },
      components: {
      	'custom-comp-1': RootComponent,
      },
    });
    
/*另一種加掛component方式-一般性教學文寫法*/
/*vapp.component("comp-test", {
  template: "<div>Hello World!</div>"
});*/
vapp.mount('#vcontainer');