Vue.component('blog-post', {
// 数组注入
// inject:['color'],
// 添加可变选项
// inject:{
// color: {
// // 选择注入的属性名
// from:'num',
// // 默认的数据
// default: 'teststr'
// }
// },
// 注入vue实例解决数据不是响应式的问题
// inject:['vueInstance'],
inject:{
vueInstance:{
from:'vueInstance'
},
// obj:{
// from:'obj',
// default: {va:345}
// },
arr: {
// 选择注入的属性名
from:'arr',
// 默认的数据
default: []
}
},
props:{
color2:{
default() {
return this.vueInstance.color;
}
}
},
// template: `
// <div>
// <h2>{{vueInstance.color}}</h2>
// <h2>{{arr}}</h2>
// 1<h2>{{obj}}</h2>1
// <div>
// `,
template: `
<div>
<h2>{{vueInstance.color,showlog()}}</h2>
<div @click='test'>click</div>
<div>
`,
created() {
},
methods:{
showlog(){
console.log(111);
},
test(){
this.vueInstance.color = 'green';
// this.color2 = 'red';
// console.log(this.color2);
}
}
})
var app = new Vue({
el: '#app',
data: {
color: 'green',
arr:[1,2]
},
provide() {
return {
// 传递this实例解决传递数据不是响应式的问题
vueInstance: this,
color:this.color,
num:123,
arr:this.arr,
obj:213 ||this.obj
};
},
created() {
setTimeout(()=>{
this.arr.push(4);
},3000);
this.obj = {a:123};
console.log(this.obj);
}
})
<!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>Document</title>
</head>
<body>
<div id="app">
<label for="red">
红色
<input type="radio" id="red" value="red" v-model="color" />
</label>
<br />
<label for="greed">
绿色
<input type="radio" id="green" value="green" v-model="color" />
</label>
<blog-post></blog-post>
</div>
</body>
</html>