<!DOCTYPE html>
<div id = "app">
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
title: 'Jave 无难事'
}
}
});
/* 定义一个根组件，数据的内容，数据内容是书名
接下来应该是什么？
setup吗？
不是说在组件实例创建之前被调用吗，这已经建立了根组件啊！不符合了吗？*/
app.component('postItem', {
props: ['postTitle'],
setup(props) {
Vue.watchEffect(() => {
console.log(props.postTitle);
})
},
template: '<h3> {{ postTitle }}</h3>'
});
app.mount('#app');
</script>
</html>
已经在console显示出date title来了
div里还什么也没有。
title是要在div里吗，script里没有
是这样吗？
<!DOCTYPE html>
<div id = "app">
<postItem>title</postItem>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
title: 'Jave 无难事'
}
}
});
/* 定义一个根组件，数据的内容，数据内容是书名
接下来应该是什么？
setup吗？
不是说在组件实例创建之前被调用吗，这已经建立了根组件啊！不符合了吗？*/
app.component('postItem', {
props: ['postTitle'],
setup(props) {
Vue.watchEffect(() => {
console.log(props.postTitle);
})
},
template: '<h3> {{ postTitle }}</h3>'
});
app.mount('#app');
</script>
</html>
正确的
<!DOCTYPE html>
<div id = "app">
<post-item :post-title="title"></post-item>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
title: 'Jave 无难事'
}
}
});
/* 定义一个根组件，数据的内容，数据内容是书名
接下来应该是什么？
setup吗？
不是说在组件实例创建之前被调用吗，这已经建立了根组件啊！不符合了吗？*/
app.component('postItem', {
props: ['postTitle'],
setup(props) {
Vue.watchEffect(() => {
console.log(props.postTitle);
})
},
template: '<h3> {{ postTitle }}</h3>'
});
app.mount('#app');
/*居然不是，那应该是什么?
:post-title="title"，这句话是什么意思？*/
</script>
</html>
还不懂，还没有参透
<!DOCTYPE html>
<div id = "app">
<post-item :post-title="title"></post-item>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
title: 'Jave 无难事'
}
}
});
/* 定义一个根组件，数据的内容，数据内容是书名
接下来应该是什么？
setup吗？
不是说在组件实例创建之前被调用吗，这已经建立了根组件啊！不符合了吗？*/
app.component('postItem', {
props: ['postTitle'],
setup(props) {
Vue.watchEffect(() => {
console.log(props.postTitle);
})
},
template: '<h3> {{ postTitle }}</h3>'
});
app.mount('#app');
/*居然不是，那应该是什么?
:post-title="title"，这句话是什么意思？*/
/*子组件绑定这个属性
post-title是一个props属性吧
根组件是data
子组件是post-item,
div里引用子组件，子组件里应用post-title，这个由根组件通过props传递给子组件的属性
子组件的模板是h3
所以最后渲染出来的结果是
h3的Java无难事
watchEffect又在这里管什么用
是实现响应式功能吗
为什么不用ref或reactive呢？不明白
先看看console里有什么吧*/
</script>
</html>
再分析，疑惑
<!DOCTYPE html>
<div id = "app">
<post-item :post-title="title"></post-item>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
title: 'Jave 无难事'
}
}
});
/* 定义一个根组件，数据的内容，数据内容是书名
接下来应该是什么？
setup吗？
不是说在组件实例创建之前被调用吗，这已经建立了根组件啊！不符合了吗？*/
app.component('postItem', {
props: ['postTitle'],
setup(props) {
Vue.watchEffect(() => {
console.log(props.postTitle);
})
},
template: '<h3> {{ postTitle }}</h3>'
});
app.mount('#app');
/*居然不是，那应该是什么?
:post-title="title"，这句话是什么意思？*/
/*子组件绑定这个属性
post-title是一个props属性吧
根组件是data
子组件是post-item,
div里引用子组件，子组件里应用post-title，这个由根组件通过props传递给子组件的属性
子组件的模板是h3
所以最后渲染出来的结果是
h3的Java无难事
watchEffect又在这里管什么用
是实现响应式功能吗
为什么不用ref或reactive呢？不明白
先看看console里有什么吧*/
/*
经过观察console
根组件,Root,是data，title，java无难事
根组件下面有一个子组件，
是PostItem
点击以后，发现有一个，这个子组件有一个prop,不是prop，不知道如果是不是有多个postTitle，这里才会是复数
看错了，这里不是prop，就是props，反正就是props，有理无理。
props下是postTitle，
postTitle对应的是Java无难事字符串，不是对象。
跟之前的，根组件的title里的字符串一样一模一样的，title这里也不是对象。
由此可见，根组件的内容数据，通过props，传递到了子组件。
那么问题依然存在，watchEffect是干什么的？
能不能用ref和reactive替换？
*/
</script>
</html>
