目录
Vue中prop属性作用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue的数据模型</title> <script src="../js/vue.js"></script> </head> <body> <!-- 容器 --> <div id="app"> {{msg}} <hr /> <div title="hello">你好</div> <!-- //age="38" age是字符串类型 :age="38" 绑定的age则是数字Number类型 --> <my-a title="hello" :msg="msg" :age="38" name="张三"></my-a> </div> <script> let myA = { /* props: ["title", "msg"], //父组件给子组件传值props接收就可以在子组件中使用 */ //限制传值的类型,比如只能传递成字符串类型的,而上面的数组就是传什么就直接接收什么 //转换成对象的写法,可以限制传入接收的数据类型,如果数据类型不对则接收失败 props: { msg: String, //age:String, 设置为这个会报警告类型问题 //age: Number, name: { //指定数据类型 type: String, //代表子组件希望父组件传值的时候有一个name属性,并且这个name属性是必须有的 required: true, //表示name属性必须有 }, /* //基本数据类型 //如果上面没有写 age: Number,那么默认值为100 age: { type: Number, default: 100, //设置默认值为100 }, */ //复杂数据类型,例如 对象 obj: { type: Object, //默认值,针对引用数据类型,Object/Array 都要一个工厂函数的形式返回 default: function () {}, }, //复杂数据类型,例如 数组 arr: { type: Array, //默认值,针对引用数据类型,Object/Array 都要一个工厂函数的形式返回 default: function () { return [1, 2, 3]; }, }, //自定义规则 age: { type: Number, // validator: function () {}, 完整写法 validator(value) { // if (value >= 50) { // return true; // } else { // return false; // } return value >= 50; }, }, }, template: ` <div>A组件--{{msg}}--{{age}}</div> `, data() { return { comMsg: "A组件的数据msg", }; }, }; // 整个页面只能有一个Vue实例对象 let vm = new Vue({ el: "#app", //局部注册 components: { "my-a": myA, }, data: { msg: "hello world", }, methods: {}, }); </script> </body> </html>
Vue组件注册 (全局组件和局部组件)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue的数据模型</title> <script src="../js/vue.js"></script> </head> <body> <!-- 容器 --> <div id="app"> {{msg}} <br /> <div>A</div> <!-- <my-com-a></my-com-a> --> <br /> <div>B</div> <my-com-b></my-com-b> </div> <script> //第一步:声明组件 let myComA = { template: ` <div>A组件</div> `, }; //什么是父组件 子组件 问题:组件通信 父子组件之间通信 let myComB = { //局部注册,在哪里用写到哪里 components: { "my-com-a": myComA, }, //可以在myComB组件里使用myComA里面的组件 //组件里面定义模板的时候只能有一个根标签,写在外面会报错或者没有渲染效果显示出来 template: ` <div>B组件 <my-com-a></my-com-a> </div> `, }; //第二步:全局注册组件 // Vue.component("my-com-a", myComA); Vue.component("my-com-b", myComB); // 整个页面只能有一个Vue实例对象 let vm = new Vue({ el: "#app", data: { msg: "hello", }, methods: {}, }); </script> </body> </html>
Vue组件通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue的数据模型</title> <script src="../js/vue.js"></script> </head> <body> <!-- 容器 --> <div id="app"> {{msg}} <h3>父子组件如何进行通信--传递属性</h3> <!-- :title="msg" 如果没有这样绑定则展示的是你好 --> <div title="你好" :title="msg">msg</div> <!-- 父组件给子组件传值,通过属性绑定的方式传值,可以动态,可以静态 :子组件需要用props选项进行接收--> <hr /> <my-com :msg="msg" title="你好"></my-com> <hr /> <!-- {{comMsg}} 这个模板就相当于父组件,拿不到子组件myCom里面的值--> <!-- 子组件给父组件传参,通过事件发射的方式传递 --> <!-- 父组件通过事件绑定来接收子组件传递的数据 @--> <my-com :msg="msg" title="你好" @my-event="myEventHandle"></my-com> <hr /> {{songMsg}} </div> <script> let myCom = { //子组件如何接收父组件的属性数据需要通过 prop属性 props: ["msg", "title"], //接收过来就相当于注册到了data当中 data() { return { comMsg: "子组件数据", }; }, template: ` <div> <span>子组件的msg:{{comMsg}}</span> <hr> <span>父组件的msg:{{msg}}--{{title}}</span> <hr> <button @click="toEmit">子组件发送数据</button> </div>`, methods: { toEmit() { //内置的方法$emit('事件触发方式',携带的参数,传递的值) this.$emit("my-event", this.comMsg, 1234); }, }, }; //注册全局 Vue.component("my-com", myCom); // 整个页面只能有一个Vue实例对象 let vm = new Vue({ el: "#app", data: { msg: "hello", songMsg: "", }, methods: { //父组件接收子组件信息 myEventHandle(a, b, c) { console.log(a, b, c); this.songMsg = a; }, }, }); </script> </body> </html>
Vue插槽slot
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue的数据模型</title> <script src="../js/vue.js"></script> </head> <body> <!-- 容器 --> <div id="app"> {{msg}} <hr /> <my-com></my-com> <hr /> <my-com> <!-- //添加给哪个插槽 --> <template v-slot:default>aaaa</template> <!-- //缩写 #slot2 --> <template #slot2>bbbb</template> </my-com> </div> <script> let myCom = { //如果设置为默认插槽,则都会被 我不好 这个值覆盖 //如果不想被覆盖,那就要 具名化 进行区分 template: ` <div> <slot name="default">默认内容1</slot> <div>111111111</div> <div>222222222</div> <slot name="slot2">默认内容2</slot> </div>`, }; Vue.component("my-com", myCom); // 整个页面只能有一个Vue实例对象 let vm = new Vue({ el: "#app", data: { msg: "hello", }, methods: {}, }); </script> </body> </html>
Vue中prop属性、组件注册(全局+局部)、组件通信、插槽slot
最新推荐文章于 2024-07-15 21:54:04 发布