父組件向子組件傳值
<div id="app">
<!-- 父組件，可以在參考子組件的時候， 通過 屬性系結（v-bind:） 的形式, 把 需要傳遞給 子組件的資料，以屬性系結的形式，傳遞到子組件內部，供子組件使用 -->
<com1 v-bind:parentmsg="msg"></com1>
</div>
// 創建 Vue 實體，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '123 啊-父組件中的資料'
},
methods: {},
components: {
// 結論：經過演示，發現，子組件中，默認無法訪問到 父組件中的 data 上的資料 和 methods 中的方法
com1: {
data() { // 注意： 子組件中的 data 資料，并不是通過 父組件傳遞過來的，而是子組件自身私有的，比如： 子組件通過 Ajax ，請求回來的資料，都可以放到 data 身上；
// data 上的資料，都是可讀可寫的；
return {
title: '123',
content: 'qqq'
}
},
template: '<h1 @click="change">這是子組件 --- {{ parentmsg }}</h1>',
// 注意： 組件中的 所有 props 中的資料，都是通過 父組件傳遞給子組件的
// props 中的資料，都是只讀的，無法重新賦值
props: ['parentmsg'], // 把父組件傳遞過來的 parentmsg 屬性，先在 props 陣列中，定義一下，這樣，才能使用這個資料，只讀，寫的話會報警告
directives: {},
filters: {},
components: {},
methods: {
change() {
this.parentmsg = '被修改了'
}
}
}
}
});
父組件向子組件傳方法
<div id="app">
<!-- 父組件向子組件 傳遞 方法，使用的是 事件系結機制； v-on, 當我們自定義了 一個 事件屬性之后，那么，子組件就能夠，通過某些方式，來呼叫 傳遞進去的 這個 方法了 -->
<com2 @func="show"></com2>
</div>
<template id="tmpl">
<div>
<h1>這是 子組件</h1>
<input type="button" value="https://www.cnblogs.com/ygjzs/p/這是子組件中的按鈕 - 點擊它，觸發 父組件傳遞過來的 func 方法" @click="myclick">
</div>
</template>
// 定義了一個字面量型別的 組件模板物件
var com2 = {
template: '#tmpl', // 通過指定了一個 Id, 表示 說，要去加載 這個指定Id的 template 元素中的內容，當作 組件的HTML結構
data() {
return {
sonmsg: { name: '小頭兒子', age: 6 }
}
},
methods: {
myclick() {
// 當點擊子組件的按鈕的時候，如何 拿到 父組件傳遞過來的 func 方法，并呼叫這個方法？？？
// emit 英文原意： 是觸發，呼叫、發射的意思
// this.$emit('func123', 123, 456)
this.$emit('func', this.sonmsg)
}
}
}
// 創建 Vue 實體，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
datamsgFormSon: null
},
methods: {
show(data) {
// console.log('呼叫了父組件身上的 show 方法: --- ' + data)
console.log(data);
this.datamsgFormSon = data
}
},
components: {
com2
// com2: com2
}
});
vue+本地存盤實作評論功能
難道在于理解父組件向子組件傳方法
<div id="app">
<cmt-box @func="loadComments"></cmt-box>
<ul >
<li v-for="item in list" :key="item.id">
<span >評論人： {{ item.user }}</span>
{{ item.content }}
</li>
</ul>
</div>
<template id="tmpl">
<div>
<div >
<label>評論人：</label>
<input type="text" v-model="user">
</div>
<div >
<label>評論內容：</label>
<textarea v-model="content"></textarea>
</div>
<div >
<input type="button" value="https://www.cnblogs.com/ygjzs/p/發表評論" @click="postComment">
</div>
</div>
</template>
var commentBox = {
data() {
return {
user: '',
content: ''
}
},
template: '#tmpl',
methods: {
postComment() { // 發表評論的方法
// 分析：發表評論的業務邏輯
// 1. 評論資料存到哪里去？？？ 存放到了 localStorage 中 localStorage.setItem('cmts', '')
// 2. 先組織出一個最新的評論資料物件
// 3. 想辦法，把 第二步中，得到的評論物件，保存到 localStorage 中：
// 3.1 localStorage 只支持存放字串資料， 要先呼叫 JSON.stringify
// 3.2 在保存 最新的 評論資料之前，要先從 localStorage 獲取到之前的評論資料（string）， 轉換為 一個 陣列物件， 然后，把最新的評論， push 到這個陣列
// 3.3 如果獲取到的 localStorage 中的 評論字串，為空不存在， 則 可以 回傳一個 '[]' 讓 JSON.parse 去轉換
// 3.4 把 最新的 評論串列陣列，再次呼叫 JSON.stringify 轉為 陣列字串，然后呼叫 localStorage.setItem()
var comment = { id: Date.now(), user: this.user, content: this.content }
// 從 localStorage 中獲取所有的評論
var list = JSON.parse(localStorage.getItem('cmts') || '[]')
list.unshift(comment)
// 重新保存最新的 評論資料
localStorage.setItem('cmts', JSON.stringify(list))
this.user = this.content = ''
// this.loadComments() // ?????
this.$emit('func')
}
}
}
// 創建 Vue 實體，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [
{ id: Date.now(), user: '李白', content: '天生我材必有用' },
{ id: Date.now(), user: '江小白', content: '勸君更盡一杯酒' },
{ id: Date.now(), user: '小馬', content: '我姓馬， 風吹草低見牛羊的馬' }
]
},
beforeCreate(){ // 注意：這里不能呼叫 loadComments 方法，因為在執行這個鉤子函式的時候，data 和 methods 都還沒有被初始化好
},
created(){
this.loadComments()
},
methods: {
loadComments() { // 從本地的 localStorage 中，加載評論串列
var list = JSON.parse(localStorage.getItem('cmts') || '[]')
this.list = list
}
},
components: {
'cmt-box': commentBox
}
});
ref獲取DOM和組件
vue中如何操作DOM
<div id="app">
<input type="button" value="https://www.cnblogs.com/ygjzs/p/獲取元素" @click="getElement" ref="mybtn">
<h3 id="myh3" ref="myh3">哈哈哈， 今天天氣太好了！！！</h3>
<hr>
<login ref="mylogin"></login>
</div>
var login = {
template: '<h1>登錄組件</h1>',
data() {
return {
msg: 'son msg'
}
},
methods: {
show() {
console.log('呼叫了子組件的方法')
}
}
}
// 創建 Vue 實體，得到 ViewModel
//vm中有一個屬性叫ref
var vm = new Vue({
el: '#app',
data: {},
methods: {
getElement() {
// console.log(document.getElementById('myh3').innerText)
// ref 是 英文單詞 【reference】 值型別 和 參考型別 referenceError
// console.log(this.$refs.myh3.innerText)
console.log(this.$refs.mylogin.msg)
this.$refs.mylogin.show()
}
},
components: {
login
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/175429.html
標籤：JavaScript