封装vue组件


html>
<html>
<head>
    <meta charset="utf-8" />
    <title>演示分别使用 v-bind和v-model与子组件进行数据交互title>
    <script src="vue.js">script>
head>
<body>
 
     
    <template id="vm">
        <div>
            <div>
                <input v-model="ival"  type="checkbox"  />{{p1}}
            div>
        div>
    template>
 
 
    <script>
        Vue.component("vm-test1", {
            template: '#vm',
            props: {
                //p1用于接收 父中的v-model的值
                p1: { type: String, default: "" },
                on: { type: String, default: "1" },
                off: { type: String, default: "0" },
            },
            //model必须叫input的事件名给起一个别名，在这里叫update
            model: {
                prop: "p1", //p1用于接收 父中的v-model的值
                event:"update1"
            },
            created: function () {
                this.ival = this.p1 == this.on;
            },
            mounted: function () {
               
            },
            data: function () {
                return {ival: ""};
            },
            watch: {
                ival: function (newValue, oldValue) {
                    this.$emit("update1", this.ival ? this.on : this.off); 
                },
                p1: function (newValue, oldValue) {
                    this.ival = this.p1 == this.on;
                }
            }
        });
    script>
 
 
    <div id="app">
        使用组件示例 ：
        <vm-test1 :on="1" :off="0" v-model="text">   vm-test1>
    div>
 
    <script>
       let test =  new Vue({
            el: "#app",
            data: {
                text: "1",
           } 
        });
    script>
body>
html>

相关阅读:
《Python编程基础》第1章、简介及示例
逆向分析：基于 JS 字节码的保护技术
基于HTML5+JavaScript实现的网页录屏器设计
通过使用Portainer来管理Docke环境以及使用私人镜像仓库
Mockaroo - 在线生成测试用例利器
（1）(1.17) Maxbotix 模拟声纳
工程力学部分知识点
「聊设计模式」之外观模式（Facade）
计算机毕业设计springboot+vue+elementUI进销存管理信息系统
ERP采购收货在标准成本和移动平均价下的差别

原文地址：https://blog.csdn.net/dystocia/article/details/134466855