vue单组件应用

   <input type="text" placeholder="水果名" ref="fruitname" />
        <input type="number" placeholder="价格" min="0" max="100" ref="fruitprice">
        <button @click="addData">添加数据</button>
    
        <ul v-for="(product,index) in products" :key="index">
            <li>
                {{product.name}}
                <input type="number" v-model.number="product.quantity" min="0" max="100">
                <span v-if="product.quantity===0">
                    _OUT OF STOCK
                </span>
                <!-- <button @click="product.quantity +=1">ADD</button> -->
                <button @click="deletebtn(index)">Delete</button>
            </li>
            <!-- <li>{{product.addname}</li> -->
        </ul>
        <h2>Total Inventory :{{totalProducts}}</h2>

<script>
        new Vue({
            el: '#app',
            data: {
                products: []
            },
//计算属性：求总价格
            computed: {
                totalProducts() {
                    return this.products.reduce((sum, product) => {
                        return sum + product.quantity
                    }, 0)
                }s
            },

            mounted(e) {
                //http://www.cjlly.com:3008/page
                fetch('http://www.cjlly.com:3008/page')
                    .then(response => response.json())
                    .then(json => {
                        this.products = json
                    })
            },
            methods: {
                addData: function (products) {
                    //获得输入框数据
                    let fruitname = this.$refs.fruitname.value;  //获得输入框数据
                    let fruitprice = this.$refs.fruitprice.value;
                    this.products.push({         //将输入框中的内容push 到数组中
                        name: fruitname,
                        quantity: fruitprice

                    })
                    console.log(fruitname, fruitprice);
                },
//根据引索，进行删除
                deletebtn: function (index) {
                    this.products.splice(index, 1);
                }
            }
        })
    </script>

访问子组件实例或子元素

尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref这个 attribute 为子组件赋予一个 ID 引用。例如：

<input ref="usernameInput"></input>

现在在你已经定义了这个 ref 的组件里，你可以使用：获得输入框中的内容

this.$refs.usernameInput.value

实例方法 / 事件

只配合一个事件名使用 $emit：

Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('welcome')">
      Click me to be welcomed
    </button>
  `
})

<div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>

new Vue({
  el: '#emit-example-simple',
  methods: {
    sayHi: function () {
      alert('Hi!')
    }
  }
})

Screenshot.png