vue-03-传值，组件属性、事件、内容

单个根元素

当构建一个 <blog-post> 组件时，你的模板最终会包含的东西远不止一个标题：

<h3>{{ title }}</h3>

最最起码，你会包含这篇博文的正文：

<h3>{{ title }}</h3> <div v-html="content"></div>

然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：

<div class="blog-post"> <h3>{{ title }}</h3> <div v-html="content"></div> </div>

组件嵌套

//子组件 var subCom = { data:function () { return { goodslist:["铅笔","钢笔","毛笔"] } }, template:`<ul><li v-for="name in goodslist">{{name}}</li></ul>` } //父组件 let parentCom = { data:function () { return { title:"生活用品" } }, components:{ subCom:subCom }, template:`<div><h2>{{title}}</h2><sub-com /></div>` }; var vm = new Vue({ el:"#app", data:{}, components:{ goodsList:parentCom } });

组件嵌套props

//第一套组件<pen-type ></pen-type>

var pens = { // name:"pens", data:function () { return { goodslist:["铅笔","钢笔","毛笔","毛笔1"] } }, template:`<ul><li v-for="name in goodslist">{{name}}</li></ul>` } let penType = {  data:function () { return {title:"办公用品"} }, components:{ myPens:pens }, template:`<div><h2>{{title}}</h2><my-pens ></my-pens></div>` };

//第二套组件<shoes-type></shoes-type>

var shoes = {  data:function () { return {goodslist:["李宁鞋","跑鞋","白鞋"]} }, template:`<ul><li v-for="name in goodslist">{{name}}</li></ul>` } let shoesType = {  data:function () { return {title:"鞋子"} }, components:{ myShoes:shoes }, template:`<div><h1>{{title}}</h1><my-shoes></my-shoes></div>` }; var vm = new Vue({ el:"#app", data:{}, components:{ penType:penType, shoesType:shoesType } });

props

通过prop父组件向子组件传递数据，即父给子传值

prop的作用是父组件中引用了子组件并给子组件加了一个属性，这个属性可以是静态的，可以是动态的，可以是数字，可以是字符串，可以是数组，还可以是对象。

var shoes = { name:"shoes", props:['goodslist'], data:function () { return {} }, template:`<ul><li v-for="name in goodslist">{{name}}</li></ul>` }

let shoesType = { props:['type',"goodslist"], //定义了形参 data:function () { return {} }, components:{   myShoes:shoes }, template:`<div> <h2>{{type}}</h2>   <my-shoes v-bind:goodslist="goodslist"></my-shoes> </div>` };

var vm = new Vue({ el:"#app", data:{ goods:[ { type:"生活用品", goodslist:['牙刷','牙岗','牙膏'] }, { type:"文具", goodslist:['铅笔','钢笔','毛笔'] }, { type:"电器", goodslist:['空调','冰箱','洗衣机',"电视"] }, { type:"鲜花", goodslist:['玫瑰花','百合花','喇叭花'] } ] }, components:{ shoesType:shoesType } });

自定义事件传值

子组件传给父组件

<div id="app"> <p>我是p</p> <div v-on:click="">{{total}}</div> <button-counter :href="aaa" v-on:increment="incrementTotal" ></button-counter> </div>

//定义子组件 var buttonCounter = { props:['href'], data:function () { return { count:0 } }, methods:{ clickfunc:function(){ this.count+=2; this.$emit("increment",this.count);//触发事件increment。 } }, template:`<div><h1>按钮</h1> <input type="button" value="点击" v-on:click="clickfunc" /> </div>` }

组件：

1、一个组件就是一个包含了html，css和js的独立的功能。

2、定义组件，就是在定义自定义标签。

3、使用组件，就是在使用自定义标签。

4、一个vue组件就是一个vue对象。每个组件有自己的data，也有自己的template（html）。

5、props：父给子传：组件的属性（自定义标签的属性），就是props（propertys）。父组件给子组件传值，父给子传：自定义属性；子接父的数据：props。

Props就是property的复数，就是属性的意思，在子组件里写props就相当于给子组件声明了若干个属性。

如：let img={

props:['src','alt','style']

}

就是告诉浏览器，img标签，有三个属性，分别是：src，alt，style。

6、组件的自定义事件：子给父传：

(1) 给子组件（标签）自定义一个事件。

(2) 子组件（标签）需要有触发自定义事件时机（代码）

(3) 给子组件的事件需要绑定一个函数（函数是在父组件里写的）

自定义组件的v-model

<div id="app"> <base-checkbox v-bind:checked="ischecked" v-on:change="showf"></base-checkbox> <span>{{ischecked?"是":"否"}}</span> </div>

Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: `<input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" >` });

let vm = new Vue({ el:"#app", data:{ ischecked:true, msg:"hello" }, methods:{ showf:function (t) { this.ischecked = t; } } });

插槽（v-slot）

插槽内容：即<slot></slot>中的内容

编译作用域：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

后备内容：有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。

<slot>{{msg}}</slot>中的{{msg}}即后备内容

<div id="app"> <p> {{msg}}</p> <navigation-link url="/profile" ><p>我是自定义<i>{{msg}}</i>标签的内容</p></navigation-link> </div>

let navigationLink= { props:['url'], data:function(){ return { msg:"子组件数据：hi" } }, template:` <a v-bind:href="url" class="nav-link"> 我在插槽前,<slot>{{msg}}</slot>   ,我在插槽后</a>` }

let vm = new Vue({ el:"#app", data:{ msg:"父组件数据：hello" }, components:{//局部注册组件 navigationLink:navigationLink } });

具名插槽

<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称

任何没有被包裹在带有 v-slot的 <template> 中的内容都会被视为默认插槽的内容。

注意 v-slot 只能添加在一个 <template> 上 (只有一种例外情况)

<div id="app"> <sub-com> <template v-slot:firstp>我是第一个p</template> <template v-slot:secondp>我是第二个p</template> <template v-slot:thirdp></template> </sub-com> </div>

let subCom= { data:function(){ return {} }, template:`<div> <p><slot name="firstp">1</slot></p> <hr/> <p><slot name="secondp">2</slot></p> <hr/> <p><slot name="thirdp">3</slot></p></div>` } let vm = new Vue({ el:"#app", data:{ }, components:{//局部注册组件 subCom:subCom } });

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的，我们想让它的后备内容显示用户的名，以取代正常情况下用户的姓

<div id="app"> <sub-com>     <template v-slot:n="slotProps"> {{slotProps.user.firstName}} </template> </sub-com> </div>

let subCom= { data:function(){ return { user:{ firstName:"江", lastname:"河" } } }, template:`<div> // 法一： // <p><slot v-bind:user="user">{{user.lastname}}</slot></p> // 法二： <p><slot name="n" v-bind:user="user">{{user.lastname}}</slot></p> </div>` } let vm = new Vue({ el:"#app", data:{ }, components:{//局部注册组件 subCom:subCom } });

动态组件

let comA= { data:function(){return {}}, template:`<div><p>a组件</p></div>` } let comB= { data:function(){return {}}, template:`<div><p>b组件</p></div>` } let vm = new Vue({ el:"#app", data:{ currentCom:comB }, components:{ comA,comB }, methods:{ changeGe:function(){ this.currentCom = (this.currentCom==comB?comA:comB); } } });

一、定义组件，就是在定义标签

二、一个完整的标签（如：img标签）包括：标签名，标签的属性，标签事件，标签的内容，

所以，在定义标签时，就需要明确标签的名字是什么，标签有哪些属性，以及属性名是什么（表示啥意思），属性值怎么呈现；标签有哪些自定义事件以及事件的触发时机；标签的内容应该显示在何处。分别由vue中的props，$emit， slot完成。

1、标签的属性名用props声明（父组件使用自定义属性时，值就传入子组件。）

2、自定义事件的触发用 this.$emit(‘自定义事件名’); （父组件使用自定义事件时，调用的函数是父组件的函数）,这样：子组件就能给父组件传值了。

3、标签内容，显示在（插在）slot的位置。即在子组件的模板里的slot标签，就是子组件innerHTML展示的位置。

vue-03-传值，组件属性、事件、内容相关推荐

vue 所有按钮属性、vue Button 所有按钮属性事件、vue a-button 所有按钮属性事件、vue 按钮所有属性事件、vue
vue 所有按钮属性.vue Button 所有按钮属性事件.vue a-button 所有按钮属性事件.vue 按钮所有属性事件.vue 1.组件注册 1.按钮类型 2.按钮组合 3.不可用状态 4 ...
Dcloud 全栈之旅1-5 组件属性-事件@
组件事件@用法我们先说下事件是做什么用的,来看看官方的解释每个组件都有"事件".事件就是在指定的条件下触发某个js方法. 比如button组件,有点击事件,也就是当手机用户 ...
vue中使用组件时事件想要传递其他参数的问题
今天在用ant design 的组件时其封装好的事件已经包含了参数,而我需要在该事件中传index判断点击的第几个元素的事件经过查询资料结果 <a-tree-select:disabled=& ...
关于解决vue.js中组件的template内容不能换行的问题
template的内容引用不能用单引号'':要用` `(着重符,感叹号左边的键). template: `<transition name="fade"><slo ...
四、Vue组件化开发学习笔记——父子组件通信，父级向子级传值（props）,子级向父级传值（自定义事件），slot插槽
一.父子组件的通信在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
vue中传值和传引用_vue prop属性传值与传引用示例
vue prop属性传值与传引用示例 vue组件在prop里根据type决定传值还是传引用. 简要如下: 传值:String.Number.Boolean 传引用:Array.Object 若想将数组 ...
Vue.js 父组件向子组件传值和子组件向父组件传值
父组件向子组件传值组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script>// 创建 Vue 实例,得到 ViewModelvar vm = new ...
通过大头儿子和小头爸爸，给女朋友讲明白了vue中父子组件的传值
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
组件间数据交互||父组件向子组件传值-基本使用|| 父组件向子组件传值-props属性名规则
组件间数据交互父组件向子组件传值 1. 组件内部通过props接收传递过来的值 2. 父组件通过属性将值传递给子组件父组件向子组件传值-基本使用 <!DOCTYPE html> < ...

vue-03-传值，组件属性、事件、内容

vue-03-传值，组件属性、事件、内容相关推荐

最新文章

热门文章