标签：标签 传值 ras ted 传递 范围 没有 对象 ble
<table>
<tbody>
<tr><td>1</td></tr>
</tbody>
</table>
Vue.component(‘row‘,{
template: ‘<tr><td>1</td></tr>‘
})
<table>
<tbody>
<row></row>
<row></row>
<row></row>
</tbody>
</table>
<table>
<tbody>
<tr is=‘row‘></tr>
</tbody>
</table>
这样就解决了这个问题了。
Vue.component(‘counter‘, {
template: ‘<div @click="handleClick">{{ number }}</div>‘,
data: function() { //记得子组件里data要是函数
return {
number: 0
}
},
methods: {
handleClick: function() {
this.number++;
}
}
})
//在两个子组件用ref引用
<counter @change=‘handleChange‘ ref=‘one‘></counter>
<counter @change=‘handleChange‘ ref=‘two‘></counter>
//接着在根组件中添加方法来处理数据
handleChange: function() {
this.total = this.$refs.one.number + this.$refs.two.number;
}
ref加在dom元素上是直接获得该dom元素，加在子组件上是获得该子组件的一个引用。
之前做TodoList的时候也提到过要从子组件向根组件传值，那个时候用的是函数的参数传递，而这里是直接获得了子组件的引用 更加方便。之前也提到，根组件向子组件传值是要在子组件里设置一个props属性来存放数据。
<div id=‘root‘>
<counter :count="0"></counter>
<counter :count="0"></counter> //通过v-bind绑定数据
</div>
var counter = {
props: [‘count‘],
data: function() { //记得要是函数哦
return {
number: this.count
}
},
template: ‘<div @click="handleClick">{{number}}</div>‘,
methods: {
handleClick: function() {
this.number++; //这里用自己创造的副本来改变
}
}
}
var vm = new Vue({
el: ‘#root‘,
components: {//记得局部组件要在父组件内注册
counter: counter
}
})
//在上面的handleClick中加上
this.$emit(‘change‘, 1); //后面这个参数是用来传值的
//在父组件内监听
<counter :count="0" @change=‘handleChange‘></counter>
<counter :count="0" @change=‘handleChange‘></counter>
//父组件内处理
handleChange: function(step) {
this.total += step;
}
var child = {
props: {
content: {
type: [String], //限制了只能是字符串
required: true, //必须要传值
default: ‘Hello, world‘, //默认字符串为这个
validator: function(value) { //限制长度等
return value.length>5;
}
}
},
template: ‘<div>{{content}}</div>‘
}
<counter></counter> 里绑定的事件，就是自定义的事件，若是写<counter @click=‘handleClick‘></counter>，这样绑定后点击并不能触发原生的click事件，这是由于counter不是原生dom；<counter @click.native=‘handleClick‘></counter>即可。之前组件间传值都是在父子组件（详见上面），那非父子组件如何传值呢？一层一层传未免过于复杂，这里介绍一种Bus方式，这里要实现：点击其中一个子组件，另一个子组件也要变成这个样子。
首先给Vue类的prototype的bus属性创建一个Vue实例，所以这个bus也是Vue的一个实例；
依然给子组件的template添加click事件，而在这个回调函数里触发bus的change事件，其中传参为当前的ct；
Vue的所有实例都有bus属性，所以触发了change事件所有子组件都能感知到，就在子组件内利用生命周期钩子mounted来让Vue实例的属性bus来接收change事件，这里传入了一个参数，就可以用来改变子组件的值；mounted函数是在 挂在子组件之后 调用的函数。
<div id="root">
<child :content=‘"TRY"‘></child>
<child :content=‘"ARASHI"‘></child>
</div>
<script>
Vue.prototype.bus = new Vue();
Vue.component (‘child‘, {
props: [‘content‘],
data: function() {
return {
ct: this.content
}
},
template: ‘<div @click="handleClick">{{ct}}</div>‘,
methods: {
handleClick: function() {
this.bus.$emit(‘change‘,this.ct);
}
},
//mounted生命周期钩子 在挂载子组件之后自动调用
mounted: function() {
var _this = this; //要保存这个this，不然后面函数会找不到这个指向
this.bus.$on(‘change‘, function(value){
_this.ct = value;
})
}
})
var vm = new Vue({
el: ‘#root‘
})
</script>
从之前的介绍中可知，可以用template来初始化子组件，但如果一切都在template中写 阅读性会十分低，有一种方式可以直接在html的子组件标签内部插入内容，这就是插槽（slot）。使用方法也不难，就直接在下面代码里讲：
//html部分
<div id="root">
<child>
<div slot=‘header‘>传进来的header</div>
<div slot=‘footer‘>传进来的footer</div>
</child>
</div>
//子组件部分
Vue.component(‘child‘,{
template: `<div>
<slot name=‘header‘></slot>
<div>模板的内容</div>
<slot name=‘footer‘></slot>
<slot name=‘default‘>默认内容</slot>
</div>`
})
var vm = new Vue({
el: ‘#root‘
})
<div id="root">
<child>
//标准格式 就是要用template标签 加上属性值设定来获取子组件传来的值，这个prop可以随便设置，只要后面{{}}里用它即可
<template slot-scope=‘prop‘>
<h1>{{prop.it}}</h1>
</template>
</child>
</div>
<script>
Vue.component(‘child‘,{
data: function() {
return {
list: [4,3,2,1]
}
},
//template里面的:it=item是为了让父组件接收到循环的值
template: ` <div>
<slot
v-for="item of list"
:it=item
></slot>
</div>`
})
var vm = new Vue({
el: ‘#root‘
})
</script>
<div id="root">
<child-one v-if="type===‘child-one‘"></child-one>
<child-two v-if="type===‘child-two‘"></child-two>
<button @click=‘handleBtnClick‘>change</button>
</div>
<script>
Vue.component(‘child-one‘,{
template: ‘<div>child-one</div>‘
})
Vue.component(‘child-two‘,{
template: ‘<div>child-two</div>‘
})
var vm = new Vue({
el: ‘#root‘,
data: {
type: ‘child-one‘
},
methods: {
handleBtnClick: function() {
this.type = (this.type===‘child-one‘?‘child-two‘:‘child-one‘);
}
}
})
</script>
<component :is=‘type‘></component>；标签：标签 传值 ras ted 传递 范围 没有 对象 ble
原文地址：https://www.cnblogs.com/TRY0929/p/13121302.html
