[上海|结业弟子]JS-赵朋|2020年06月29日的日报-技能树.IT修真院

发表于： 2020-06-29 21:22:01

1 2341

今日完成:

父子组件

ps:可以把一个组件当成vue实例看待,它也有vue实例中的属性,或者说vue实例也可以看成一个组件

vue实例是root组件(根组件,最顶部的组件)

类似less的属性嵌套,两个构造器,构造器1,可以再构造器2的内注册,注册器2在vue实例中注册,

这样只调用组件2,就同时调用了构造器1和2的内容,1是2的子组件,2是1的父组件

遇到问题:无法显示

原因:模版template属性,要用div包裹所有在这个属性中写入的内容,这里我没这样做,页面只显示div包裹的内容

组件和组件之间存在层级关系

父子组件错误用法:以子标签的形式在Vue实例中使用

因为当子组件注册到父组件的components时, Vue会编

译好父组件的模块

该模板的内容已经决定了父组件将夔渲染的HTML (相当

于父组件中已经有了子组件中的内容了)

<child-cpn> </child-cpn>是只能在父组件中被识别的。

类似这种用法, <child-cpn> </child-cpn>是会被浏览器忽略的语法糖

Vue为了简化注册组件的过程,提供了注册的语法糖。

主要是省去了调用Vue.extend()的步骤,而是可以直接使用一个对象来代替。模版分离写法

描述;就是把原先显示在html页面的内容(template模版内容),从组件中抽离出去,一共两种写法

ps:模版格式:template:`<div>内容</div>`

...

. 理解组件中的data为什么是个函数

组件中的data是个函数,而不像vue实例中的data是个对象

ps:当把组件中的data当对象来写会报错

组件是一个单独功能模块的封装:

这个模块有属于自己的HTML模板,也应该有属性自己的数据data.

组件内部是不能直接访问vue实例(定义)的数据的

Vue组件应该有自己保存数据data的地方。

组件对象也有一个data属性,也可以有methods等属性

组件中的data必须是个函数,而且这个函数返回一个对象,对象内部保存着数据

语法模版:

data(){

return{

对象...

}

//注册组件
Vue.component('cpn',{
template:'#cpn',
data(){
return {
text:'插值语法变量值'
}
}
})
...
//计数器组件,为什么是个函数
Vue.component('jishu',{
template:'#jishu',
//data是个函数,每次调用,都会return一个新的对象(相互独立互不影响)
data(){
return {
...
})
...

function abc(){
return{
name:"张三",
age:18
}
}
//每个obj1,2,3的内存地址都是不一样的
let obj1 = abc()
let obj2 = abc()
let obj3 = abc()
//验证,改变obj1,看看其他两个对象打印结果是否改变,显示只有obj1对像改变,内存地址不一样
obj1.name = "李四"
console.log(obj1);
console.log(obj2);
console.log(obj3);
//内存地址一样时候是什么情况,如下打印,其中
const oobj = {
name:"张三",
age:18
}
function efj(){
return oobj//这相当于固定死了一个内存地址,每次调用,都指向同一个内存地址
}
//当以函数返回时,返回的都是同一个内存地址,即变量oobj,同一个对象
//每个oobj1,2,3都指向同一个内存地值
let oobj1 = efj()
let oobj2 = efj()
let oobj3 = efj()
//那么改变oobj1,结果其他两个也改变
//同理,当封装的组件多次引用时,这里多个组件引用的是同一个data,假如,data是个对象,
//其中一个组件改变时,其他组件也会跟着改变,但大多时候,是希望组件相互独立互不影响
//如,举例的计时器组件多次调用,希望点击按钮,对应的组件加或减,而不是所有的组件加或减
//这时,就体现出,组件中的data必须是个函数而不是对象
oobj1.name = '王五'
console.log(oobj1);
console.log(oobj2);
console.log(oobj3);
</script>