vue⽅法传值到data_Vue组件传值与通信集合
Vue的组件化给前端开发带来极⼤的便利，这种依赖数据来控制Dom的模式，区别于以前的开发控制Dom的开发理念，这也导致了⼀种情况，在Vue中是单向数据流的，意味着只能从⽗组件向⼦组件传值，不允许⼦组件向⽗组件传值。这样会防⽌从⼦组件意外改变⽗级组件的状态，从⽽导致你的应⽤的数据流向难以理解。 ---vue教程
然⽽当我们把组件拆分到⾜够细的时候，⼦组件控制⽗组件的数据，或者兄弟组件之间的传值就变得尤为突出，这⾥我将总结各式各样的传值，函数调⽤的⽅法。
⽗组件中的通信⽅法
阅读完官⽅⽂档后，我们⼀定会对props有强烈的印象，然⽽在⽗组件中可不⽌有这种通信的⽅式。
props命名规范
HTML 中的特性名是⼤⼩写不敏感的，所以浏览器会把所有⼤写字符解释为⼩写字符。这意味着当你使⽤ DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使⽤其等价的 kebab-case (短横线分隔命名) 命名：
Vueponent('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '
{{ postTitle }}
'
})传递静态或动态 Prop 假如你想传字符串给⼦组件只需要给便签添加属性就可以了
//这⾥的title的内容就会传给⼦组件
当然那些⾮字符串的类型就直接依赖于v-bind进⾏传值(Number、Boolean、)
v-bind:title="post.title + ' by ' + post.author.name"
>
⼦组件接收
常见的就是声明式接收： props: [...] 数组形式
// 定义⼀个名为 button-counter 的新组件
Vueponent('button-counter', {
props: ['title', 'count', 'isPublished', 'commentIds', 'author'],
data: function () {
return {
counts: unt //this指向即可获取props值
}
},
template: ''
})
但官⽅更推荐对象形式的接收，⾄少为每个prop指定类型
Vueponent('my-component', {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从⼀个⼯⼚函数获取
default: function () {
return { message: 'hello' }
}
},
// ⾃定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的⼀个
return ['success', 'warning', 'danger'].indexOf(value) !== -1 }
}
}
})
type 可以是下列原⽣构造函数中的⼀个：String
Number
Array
Object
Date
Function
Symbol
使⽤上我们除了this.prop外还可以使vm.$props(当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。)禁⽤特性继承
如果你不希望组件的根元素继承特性，这尤其适合配合实例的 $attrs 属性使⽤，你可以在组件的选项中设置 :
Vueponent('my-component', {
inheritAttrs: false,
// ...
})
当然还有⾮声明式的接收 $attrs (2.4.0 新增)：包含了⽗作⽤域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当⼀个组件没有声明任何 prop 时，这⾥会包含所有⽗作⽤域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传⼊内部组件——在创建⾼级别的组件时⾮常有⽤。
placeholder="Enter your username" data-date-picker="activated"
>
Vueponent("base-input", {
inheritAttrs: false, //此处设置禁⽤继承特性
props: ["label"],
template: `
{{label}}
{{$attrs.placeholder}} //这⾥不⽤声明props可以直接调⽤
{{$attrs["data-date-picker"]}}
`,
mounted: function() {
console.log(this.$attrs);
input标签placeholder属性
}
})
provide/injectprovide 和 inject 主要为⾼阶插件/组件库提供⽤例。并不推荐直接⽤于应⽤程序代码中。
// ⽗级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// ⼦组件注⼊ 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}提⽰：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然⽽，如果你传⼊了⼀个可监听的对象，那么其对象的属性还是可响应的。
更多的⽤法是⽤来注⼊⽅法的：
// ⽗级组件提供 'foo'
var Provider = {
provide: {
foo: this.fn
},
methods:{
fn(){
console.log('bar')
}
}
/
/ ...
}
// ⼦组件注⼊ 'foo'
var Child = {
inject: ['foo'],
created () {
this.foo(); // => "bar"
}
// ...
}
vm.$children
通过Vue实例代理的$children获取其⼦组件的值，为⼀个类数组，你可以在控制台中打印出来，⾥⾯有⼦组件中的⼀切属性。
vm.$slots
插槽的使⽤更多在官⽅⽂档中查看，这⾥显⽰基础的使⽤⽅法：
Your Profile
然后你在 的模板中可能会写为：
v-bind:href="url"
class="nav-link"
>
除了⽤标签获取传递的数据，我更喜欢⽤$slots处理，⽐如在这个输⼊框中，你既要设定lable⼜要设定placeholder，然⽽它们两其实是同
⼀个数据，这时候我们可以这样：
联系⼈
电话
var Component = {
props: {
readonly: {
default: false
},
type: {
default: 'text'
},
value: [String, Number],
maxlength: {
default: 20
}
},
data() {
return {
inputValue: this.value
}
},
watch: {
value(newValue) {
this.inputValue = newValue
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。