封装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>

相关阅读:
自动驾驶 2D 单目\双目\多目视觉方法一（Pseudo-LiDAR，Mono3D，FCOS3D，PSMNet）
java.lang.Float类下toString(float f)方法具有什么功能呢？
Advances in Graph Neural Networks笔记2：Fundamental Graph Neural Networks
Haproxy配合Nginx搭建Web集群
在tdengine容器中生成初始化数据库的SH命令
【力扣题:循环队列】
数组处理方法总结
c++异常
集群任务均衡的一种实践
浅谈Lua协程和函数的尾调用

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